/*
 * The design tokens of the default theme, each with a comment saying what it is for, which the design system shows
 * (design-system/README.md). Components use only these, so a theme is a set of values for them: a rule
 * for `[data-theme="<name>"]` that sets every one (`themeTokenNames` in `lib/themeTokens` lists them). The theme
 * is chosen by the app, on the root element, or on any element whose part of the page should look different.
 *
 * A bundler that lowers `light-dark()` for older browsers (Lightning CSS, in Vite and Turbopack) resolves each colour
 * where the token is declared, not where it is used. So an element that changes the colour scheme also names its
 * theme, and the theme's tokens are declared again there.
 *
 * Each colour gives its light and dark value with `light-dark()`, which picks one by the element's `color-scheme`.
 *
 * The selector counts for nothing (`:where`), so a theme's own rule wins whichever stylesheet is loaded first.
 */
:where(:root, [data-theme="default"]) {
	/*
	 * The one action a page is for: primary buttons, links, the brand mark, focus rings and the toast's border. 4.5:1 or
	 * more against `colour-on-primary` in both schemes (dark text on a light indigo in the dark scheme), and as link
	 * text on `colour-bg`, `colour-surface` and `colour-primary-soft`.
	 */
	--colour-primary: light-dark(#4f46e5, #818cf8);
	/*
	 * A primary button or a link under the pointer: a step lighter than `colour-primary` in the dark scheme, a step
	 * darker in the light one. 4.5:1 or more against `colour-on-primary`.
	 */
	--colour-primary-hover: light-dark(#4338ca, #a5b4fc);
	/*
	 * A quiet wash of the primary: badges, notices, the ring round a focused input. `colour-text` and a badge's
	 * `colour-primary` text both read on it, 4.5:1 or more in both schemes.
	 */
	--colour-primary-soft: light-dark(#eef2ff, #1e1b4b);
	/*
	 * Text and icons on `colour-primary` and `colour-primary-hover`: a primary button's label, the brand mark's letter.
	 * White in the light scheme, dark in the dark one, where the primary is light.
	 */
	--colour-on-primary: light-dark(#ffffff, #0f172a);
	/* An action that destroys something, and form errors. 4.5:1 or more on `colour-danger-soft` in both schemes. */
	--colour-danger: light-dark(#b91c1c, #f87171);
	/* A filled danger action under the pointer, a step darker in the light scheme. No component uses it yet. */
	--colour-danger-hover: light-dark(#991b1b, #fca5a5);
	/* Behind a form error, and a danger ghost button under the pointer. */
	--colour-danger-soft: light-dark(#fef2f2, #450a0a);
	/* Something that worked: the toast's tick. An icon colour, not a text colour. */
	--colour-success: light-dark(#16a34a, #4ade80);

	/* The page behind the cards, and a row or secondary button under the pointer. */
	--colour-bg: light-dark(#f8fafc, #0f172a);
	/* Cards, the sidebar, dialogs, toasts and inputs. */
	--colour-surface: light-dark(#ffffff, #1e293b);
	/* The rules between rows, round cards and dialogs, and a disabled primary button's fill. */
	--colour-border: light-dark(#e2e8f0, #334155);
	/* The edge of an input or secondary button. 3:1 or more on `colour-surface` in both schemes (WCAG 1.4.11). */
	--colour-border-strong: light-dark(#8393a8, #64748b);
	/* Behind a dialog, and behind the sidebar when it slides out on a phone, dimming the page. */
	--colour-overlay: rgb(15 23 42 / 0.45);

	/* Body copy and headings, on `colour-bg`, `colour-surface` and `colour-primary-soft`. */
	--colour-text: light-dark(#0f172a, #f1f5f9);
	/* Secondary copy: paragraphs, subtitles, field labels, help text. 4.5:1 or more on `colour-bg` and `colour-surface`. */
	--colour-text-muted: light-dark(#64748b, #94a3b8);
	/*
	 * The quietest text: placeholders and disabled buttons, which WCAG exempts from contrast. 2.6:1 on `colour-surface`
	 * in the light scheme, so never for copy that must be read (hints and group labels use `colour-text-muted`).
	 */
	--colour-text-faint: light-dark(#94a3b8, #64748b);

	/* A person's initials on their avatar, whose colour comes from `--avatar-saturation` and `--avatar-lightness`. */
	--colour-on-avatar: #ffffff;
	/* How saturated every avatar's colour is. Each person has their own hue. */
	--avatar-saturation: 55%;
	/* How light every avatar's colour is, dark enough for `colour-on-avatar` initials to reach 4.5:1 at every hue. */
	--avatar-lightness: 30%;

	/* Buttons, inputs, notices, form errors and sidebar links. */
	--radius-sm: 6px;
	/* Toasts. */
	--radius-md: 10px;
	/* Cards and dialogs. */
	--radius-lg: 14px;

	/* A card resting on the page. */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	/* What floats over the page: dialogs, toasts, and the sidebar when it slides out on a phone. */
	--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

	/* The outline round a focused button; the ring round a focused input is a pixel wider. */
	--focus-ring-width: 2px;

	/* Every piece of text: the platform's own interface face, so the app reads like the rest of the person's system. */
	--font-sans: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", ui-sans-serif, Roboto, Arial, sans-serif;
	/* The size of body copy. `rem` sizes still follow the browser's own, not this. */
	--font-size-base: 15px;
}

/*
 * The colour scheme: light unless an element says otherwise with `data-colour-scheme`, `"dark"` or `"system"` (the
 * device's own). Native controls, such as a date field's calendar button and scrollbars, follow it too.
 *
 * Deprecated: `data-theme="light"` and `data-theme="dark"` chose the colour scheme before themes did. They still
 * do, but go in the next breaking release. Use `data-colour-scheme` instead, and don't name a theme "light" or
 * "dark". They come first, so `data-colour-scheme` wins where an element has both.
 */
:where(:root) {
	color-scheme: light;
}

:where(:root)[data-theme="light"] {
	color-scheme: light;
}

:where(:root)[data-theme="dark"] {
	color-scheme: dark;
}

[data-colour-scheme="light"] {
	color-scheme: light;
}

[data-colour-scheme="dark"] {
	color-scheme: dark;
}

[data-colour-scheme="system"] {
	color-scheme: light dark;
}

/*
 * Part of a page in another theme or colour scheme, with both attributes: its text and ground are its own, not
 * inherited as they are from outside it. The root element's are the body's, below.
 */
:where([data-theme][data-colour-scheme]):where(:not(:root)) {
	color: var(--colour-text);
	background-color: var(--colour-bg);
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--colour-text);
	background: var(--colour-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.01em;
}

p {
	margin: 0;
	color: var(--colour-text-muted);
}

a {
	color: var(--colour-primary);
	text-decoration: none;
}

/* A link in running text has no class, and colour alone doesn't set it apart from the text around it (WCAG 1.4.1). */
a:not([class]) {
	text-decoration: underline;
}

a:hover {
	color: var(--colour-primary-hover);
}

/* App shell + header + sidebar */

.app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.app-body {
	display: flex;
	align-items: stretch;
	flex: 1;
	min-height: 0;
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 220px;
	flex-shrink: 0;
	padding: 1.5rem 1.25rem;
	background: var(--colour-surface);
	border-right: 1px solid var(--colour-border);
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sidebar-nav__link {
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

.sidebar-nav__link:hover {
	background: var(--colour-bg);
	color: var(--colour-text);
}

.sidebar-nav__group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.5rem;
}

.sidebar-nav__group-label {
	padding: 0 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--colour-text-muted);
}

/* The top of the page: the menu button, shown only when the sidebar is put away, then the header. On a wide screen the
   wrapper is left out of the layout, so the header sits where it always has. */
.app-top {
	display: contents;
}

.app-top__menu-button {
	display: none;
}

/* On a wide screen the sidebar sits in the layout as it is; the wrapper is only there to listen to it. */
.app-sidebar {
	display: contents;
}

.app-sidebar__backdrop {
	display: none;
}

/* Too narrow for the sidebar beside the page: the sidebar is put away behind a menu button and opens over the page. */
@media (max-width: 900px) {
	.app-top {
		display: flex;
		align-items: center;
		padding-left: 0.75rem;
		background: var(--colour-surface);
		border-bottom: 1px solid var(--colour-border);
	}

	.app-top__menu-button {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		/* A 44px tap target. At the top of the bar, not centred in it, so that when the header wraps onto two rows the
		   button stays level with the first. The margin puts its centre on the first row's centre: the header's
		   top padding (0.625rem) plus half a row (the avatar, 2rem) less half the button (1.375rem). It assumes the first
		   row is as tall as the avatar; an app whose first row is taller sets its own margin. */
		align-self: flex-start;
		width: 2.75rem;
		height: 2.75rem;
		margin-top: 0.25rem;
		padding: 0;
		border: none;
		border-radius: var(--radius-sm);
		background: none;
		color: var(--colour-text);
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
	}

	.app-top__menu-button:hover {
		background: var(--colour-bg);
	}

	.app-sidebar .sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 110;
		width: min(280px, 85vw);
		overflow-y: auto;
		box-shadow: var(--shadow-md);
		transform: translateX(-100%);
		visibility: hidden;
		/* Hidden only once it has slid away, so it can't be tabbed into while put away. */
		transition:
			transform 0.2s ease,
			visibility 0s linear 0.2s;
	}

	/* Visible at once when opened, so its first link can take focus straight away. */
	.app-shell[data-sidebar-open] .app-sidebar .sidebar {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease;
	}

	.app-sidebar__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 105;
		padding: 0;
		border: none;
		background: var(--colour-overlay);
		cursor: default;
	}
}

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

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--colour-text);
	letter-spacing: -0.01em;
}

.brand:hover {
	color: var(--colour-text);
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-sm);
	background: var(--colour-primary);
	color: var(--colour-on-primary);
	font-size: 0.875rem;
	font-weight: 700;
}

/* The bar across the top of the page: an app puts whatever it needs on the right of it (who's signed in, a picker,
   signing out), the avatar last. An app that needs more than this puts its own rules on `.app-header`'s children. */
.app-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding: 0.75rem 1.5rem;
	background: var(--colour-surface);
	border-bottom: 1px solid var(--colour-border);
}

.app-header__user {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

@media (max-width: 900px) {
	.app-top .app-header {
		flex: 1;
		min-width: 0;
		gap: 0.5rem;
		padding: 0.625rem 1rem 0.625rem 0.5rem;
		border-bottom: none;
	}

	/* Just the avatar, which still gives the name to anyone who can't see it. */
	.app-header__user-name {
		display: none;
	}

	.app-header .badge {
		display: block;
		min-width: 0;
		max-width: 11rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* A select in the header for choosing which tenant to work in: a pill sized to the name it shows rather than a form's
   full width, whose long name is cut off with an ellipsis so it cannot break the header. It overrides the generic
   `select` rule's width and border with a class, which outranks it. */
.tenant-picker {
	width: auto;
	min-width: 0;
	max-width: 20rem;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-primary);
	background: var(--colour-primary-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
}

.tenant-picker:focus {
	border-color: var(--colour-primary);
}

.tenant-picker:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* A touch-first header: a tap target of at least 44px, and less room for the name. */
@media (max-width: 900px) {
	.tenant-picker {
		min-height: 2.75rem;
		max-width: 11rem;
	}
}

/* A phone: the avatar and the gap beside it take 2.5rem, the picker keeps the rest of the line. */
@media (max-width: 600px) {
	.tenant-picker {
		max-width: calc(100% - 2.5rem);
	}
}

/* Page shell */

.page {
	flex: 1;
	min-width: 0;
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

/* A phone: the page keeps a narrower gutter, so its content has the room. */
@media (max-width: 600px) {
	.page {
		padding: 1.5rem 1rem 3rem;
	}
}

.page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.page-header h1 {
	font-size: 1.375rem;
}

/* Who or what a page is about, beside its heading: an avatar, then the heading and subtitle. */
.page-header__identity {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.page-subtitle {
	margin-top: 0.25rem;
	font-size: 0.875rem;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	/* A tap target of at least 44px. The negative margin above and the smaller one below give back the height the
	   target adds, so the link sits where a 21px one did. */
	min-height: 2.75rem;
	margin-block: -0.6875rem 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--colour-text-muted);
}

.back-link:hover {
	color: var(--colour-text);
}

/* Card */

.card {
	background: var(--colour-surface);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.card + .card {
	margin-top: 1.25rem;
}

/* Labelled values read off a record, one to a row, in a card under its title: what a summary card shows. */
/* Sized as a container, so its rows go by the room the list has, not the screen's: a page beside the sidebar and a
   chat can be as narrow as a phone's on a wide screen. */
.summary-list {
	container-type: inline-size;
	margin: 0;
	padding: 0.25rem 1.25rem;
}

.summary-list__row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr;
	gap: 0.25rem 1.25rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--colour-border);
}

.summary-list__row:last-child {
	border-bottom: none;
}

.summary-list__row dt {
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}

.summary-list__row dd {
	margin: 0;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

@container (max-width: 30rem) {
	.summary-list__row {
		grid-template-columns: 1fr;
	}
}

/* A person in a small circle: their picture, or their initials on their own colour. */
.user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--colour-on-avatar);
	background-color: hsl(var(--avatar-hue) var(--avatar-saturation) var(--avatar-lightness));
	vertical-align: middle;
}

/* A heading across the top of a card, above its rows. */
.card-title {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
	font-size: 1rem;
}

/* A card's title with what can be done to what it shows on the right, such as a "Change" link. The rule under the
   title runs under the action too. */
/* Where there is no room for both on one line, the action goes under the title rather than into it. */
.card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
}

/* The header pads the title, as it does the action beside it. */
.card-header > .card-title {
	padding: 0;
	border-bottom: none;
}

.card-header__action {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 500;
}

/* A link or button in the action is a tap target of at least 44px. The negative margin gives back the height this
   adds, so the header is no taller than with a bare link: the target reaches into the header's padding. */
.card-header__action > a,
.card-header__action > button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-block: -0.625rem;
}

/* The inside of a card that holds prose and something to do about it (`CardBody`): padding, a gap between paragraphs,
   and the actions below. */
.card-body {
	padding: 1rem 1.25rem;
}

.card-body > * + * {
	margin-top: 0.75rem;
}

.card-body > .card-body__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Command cards: one recorded command each, in a list */

.command-card {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
}

.command-card:last-child {
	border-bottom: none;
}

.command-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.command-card__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.command-card__name {
	font-size: 0.9375rem;
}

.command-card__fields {
	display: grid;
	grid-template-columns: minmax(10rem, max-content) 1fr;
	gap: 0.5rem 1.25rem;
	margin: 0.875rem 0 0;
}

/* Too narrow for a field's name beside its value: each value goes under its name. */
.command-card {
	container-type: inline-size;
}

@container (max-width: 28rem) {
	.command-card__fields {
		grid-template-columns: 1fr;
		row-gap: 0.125rem;
	}

	.command-card__field:not(:last-child) dd {
		margin-bottom: 0.5rem;
	}
}

.command-card__field {
	display: contents;
}

.command-card__field dt {
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
}

.command-card__field dd {
	margin: 0;
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.command-card__previous {
	color: var(--colour-text-muted);
}

/* Why a command can't be reversed, where its reverse button would be. */
.command-card__irreversible {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
	text-align: right;
}

/* List rows */

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

/* Where the row is too narrow for what it is and what is known about it side by side (a phone, a long name, several
   badges), the meta goes under it rather than squeezing it or pushing the page sideways. */
.list-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
	transition: background-color 120ms ease;
}

.list-row:last-child {
	border-bottom: none;
}

.list-row:hover {
	background: var(--colour-bg);
}

/* What a row is (its first element: its link, its text) takes the room the meta leaves, down to 8rem; below that, the
   row wraps and the meta goes underneath. So a long text wraps beside the meta on a wide screen, and the meta only moves
   on a narrow one. Only the first element grows, so a row's other children keep their places. It has no more weight than
   one class, so a row's own rule (an audit entry's) wins. */
:where(.list-row, .item-row) > :where(:first-child):not(.list-row__meta, input) {
	flex: 1 1 8rem;
	min-width: 0;
}

/* On its own line, a meta wider than the row wraps its badges and actions too. */
.list-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	min-width: 0;
}

/* An item row's text breaks anywhere; what is known about it doesn't. */
.item-row > .list-row__meta {
	overflow-wrap: normal;
}

.list-row__link {
	font-weight: 600;
	color: var(--colour-text);
	min-width: 0;
	overflow-wrap: anywhere;
}

.list-row__link:hover {
	color: var(--colour-primary);
}

/* The bar above a list that can be picked from: the select-all checkbox, and the action on what is picked. */
.list-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
}

/* A checkbox for picking a row, in a target big enough to hit with a finger (44 by 44 pixels). */
.select-target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	cursor: pointer;
}

/* An audit row: who it was for and what it is (the row's link), then what it did, one line each. */
.audit-list-entry {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1 1 14rem;
	min-width: 0;
}

/* Its link is a target a finger can hit (at least 44 pixels high), with less padding round the row to make up for it. */
.audit-list-entry .list-row__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.list-row:has(.audit-list-entry) {
	padding-block: 0.5rem;
}

.audit-list-entry ul {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}

/* Who or what a row is about, beside its link: an avatar and the link, kept together on the left. */
.list-row__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

/* Wraps as `.list-row` does. Text that is one unbroken word (an email address) breaks, rather than pushing the row wider
   than the screen. */
.item-row {
	overflow-wrap: anywhere;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--colour-border);
}

.item-row:last-child {
	border-bottom: none;
}

.item-row span:not(.badge, .user-avatar, .visually-hidden) {
	font-size: 0.9375rem;
}

/* Badge */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5rem;
	border-radius: 999px;
	background: var(--colour-primary-soft);
	color: var(--colour-primary);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Empty state */

.empty-state {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--colour-text-muted);
	font-size: 0.9375rem;
}

.empty-state__image {
	display: block;
	margin: 0 auto 1.25rem;
}

/* Status pages: not found, something went wrong */

.status-page {
	padding: 4rem 1.5rem;
	text-align: center;
}

.status-page__code {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--colour-text-muted);
}

.status-page h1 {
	margin-top: 1rem;
	font-size: 1.375rem;
}

.status-page p {
	max-width: 32rem;
	margin: 0.75rem auto 0;
	color: var(--colour-text-muted);
	font-size: 0.9375rem;
}

.status-page__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* Centred card page: what a visitor who isn't signed in sees, one card under the app's name and logo */

.centred-card-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: 2rem 1rem;
}

.centred-card-page__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.centred-card-page__logo {
	display: block;
	width: auto;
	height: 2rem;
}

.centred-card-page__card {
	width: 100%;
	max-width: 26rem;
}

.centred-card-page__title {
	font-size: 1.375rem;
}

.centred-card-page__footer {
	margin-top: 1.5rem;
	color: var(--colour-text-muted);
	font-size: 0.8125rem;
	text-align: center;
}

/* Forms */

.form-card {
	padding: 1.5rem 1.25rem;
}

/* The card already pads its sides, so a title inside one lines up with the fields and its rule runs the full width. */
.form-card > .card-title,
.form-card > .card-header {
	margin: -1.5rem -1.25rem 1.25rem;
}

.field {
	margin-bottom: 1.25rem;
}

/* The last field among its siblings, whatever else comes after it. */
.field:not(:has(~ .field)) {
	margin-bottom: 0;
}

/* Any sibling, not only the next one: hidden inputs often sit between the last field and the button. */
.form-card .field:not(:has(~ .field)) ~ .btn:not(.btn-block) {
	margin-top: 1.25rem;
}

.field label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

/* A checkbox or radio with its label beside it: an option rather than a field's name, so it reads as body text. */
.field-inline label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--colour-text);
}

/* Level with the left edge, and centred on the label's first line (0.875rem at line-height 1.5) however many lines it
   runs to. */
.field-inline > label > input {
	flex: none;
	width: 13px;
	height: 13px;
	margin: calc((0.875rem * 1.5 - 13px) / 2) 0 0;
}

/* A group of fields under one name, such as a set of radio buttons: a fieldset without the browser's box, spaced like
   a field. Opt-in, so a fieldset that wants its box keeps it. */
.field-group {
	min-width: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

/* A field just before a group would otherwise touch its legend. */
.field ~ .field-group {
	margin-top: 1.25rem;
}

/* The group's name, set like a field's label. */
.field-group > legend {
	margin-bottom: 0.375rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

/* The options in a group sit close together, so they read as one choice. The last has none: the group's own margin
   spaces it from what follows. */
.field-group > .field-inline:not(:last-of-type) {
	margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.5625rem 0.75rem;
	font: inherit;
	color: var(--colour-text);
	background: var(--colour-surface);
	border: 1px solid var(--colour-border-strong);
	border-radius: var(--radius-sm);
	transition:
		border-color 120ms ease,
		box-shadow 120ms ease;
}

/* A password field with its show/hide button inside its right edge. The button stays hidden until script reveals it. */
.password-input {
	position: relative;
	display: block;
}

.password-input .password-input__input {
	padding-right: 4.5rem;
}

/*
 * A tap target of at least 44x44px at the field's right edge. The button has no border or background, so where it is
 * taller than the field it shows nothing. The input's right padding (above) has to stay wider than the button, which
 * is its text and 0.75rem each side (about 59px), so that typed text stays clear of it.
 */
.password-input__toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.password-input__toggle[hidden] {
	display: none;
}

.password-input__toggle:hover {
	color: var(--colour-text);
}

textarea {
	resize: vertical;
	min-height: 5rem;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
select::placeholder,
textarea::placeholder {
	color: var(--colour-text-faint);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--colour-primary);
	box-shadow: 0 0 0 calc(var(--focus-ring-width) + 1px) var(--colour-primary-soft);
}

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5625rem 1rem;
	/* Tall enough to tap, wherever the button is. */
	min-height: 2.75rem;
	font: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		box-shadow 120ms ease;
}

/* A button rendered `hidden` (until a script shows it) stays hidden, though `.btn` sets its own display. */
.btn[hidden] {
	display: none;
}

.btn-primary {
	background: var(--colour-primary);
	color: var(--colour-on-primary);
}

/* Each hover sets its text colour, because a link's own hover colour (`a:hover`) would otherwise win over the button's. */
.btn-primary:hover {
	background: var(--colour-primary-hover);
	color: var(--colour-on-primary);
}

.btn-secondary {
	background: var(--colour-surface);
	color: var(--colour-text);
	border-color: var(--colour-border-strong);
}

.btn-secondary:hover {
	background: var(--colour-bg);
	border-color: var(--colour-text-faint);
	color: var(--colour-text);
}

/* A disabled button is dull and grey, and stays so under the pointer: these come after the hover rules to win. */
.btn:disabled {
	cursor: not-allowed;
	box-shadow: none;
}

.btn-primary:disabled {
	background: var(--colour-border);
	border-color: var(--colour-border);
	color: var(--colour-text-faint);
}

.btn-secondary:disabled {
	background: var(--colour-bg);
	border-color: var(--colour-border);
	color: var(--colour-text-faint);
}

.btn-danger-ghost {
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	color: var(--colour-danger);
	background: transparent;
}

.btn-danger-ghost:hover {
	background: var(--colour-danger-soft);
	border-color: var(--colour-danger-soft);
	color: var(--colour-danger);
}

.btn-danger-ghost:disabled {
	color: var(--colour-text-faint);
	background: transparent;
	border-color: transparent;
	cursor: not-allowed;
}

/*
 * A button whose work is in flight (`aria-busy`) is busy, not unavailable: it keeps its own colours rather than the
 * disabled grey, and a thin line slides along its bottom edge in its text colour. These come after the disabled
 * rules to win over them.
 */
.btn[aria-busy="true"] {
	position: relative;
	overflow: hidden;
	cursor: progress;
}

.btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40%;
	height: 2px;
	background: currentColor;
	opacity: 0.85;
	animation: btn-busy 1.1s ease-in-out infinite;
}

.btn-primary[aria-busy="true"] {
	background: var(--colour-primary);
	border-color: var(--colour-primary);
	color: var(--colour-on-primary);
}

.btn-secondary[aria-busy="true"] {
	background: var(--colour-surface);
	border-color: var(--colour-border-strong);
	color: var(--colour-text);
}

.btn-danger-ghost[aria-busy="true"] {
	color: var(--colour-danger);
}

@keyframes btn-busy {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(250%);
	}
}

/* Slowed rather than stopped, so there is still something to say the button is busy. */
@media (prefers-reduced-motion: reduce) {
	.btn[aria-busy="true"]::after {
		animation-duration: 3s;
	}
}

.btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 2px;
}

.form-error {
	margin-bottom: 1.25rem;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
	background: var(--colour-danger-soft);
	color: var(--colour-danger);
	font-size: 0.8125rem;
}

/* An error under its field sits close to the control it is about, like help does. */
.field .form-error,
.field-group > .form-error {
	margin: 0.375rem 0 0;
}

.field-group > .form-error {
	margin-bottom: 0.5rem;
}

/* A field with something wrong in it: its control's border says so, as its error does. */
.field-invalid input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.field-invalid select,
.field-invalid textarea {
	border-color: var(--colour-danger);
}

/* A checkbox or radio with something wrong: a ring of the danger colour, since its own border can't be coloured. A
   shadow, not an outline, so the browser's focus ring still shows when the summary's link takes the person there. */
.field-invalid input:is([type="checkbox"], [type="radio"]) {
	box-shadow: 0 0 0 var(--focus-ring-width) var(--colour-danger);
}

/* What's wrong with a form, at its top after a failed submit, each line linking to its field (GOV.UK's pattern). */
.error-summary {
	margin-bottom: 1.25rem;
	padding: 0.875rem 1rem;
	border: var(--focus-ring-width) solid var(--colour-danger);
	border-radius: var(--radius-sm);
	background: var(--colour-danger-soft);
	color: var(--colour-text);
}

/* It takes focus when it appears, so a keyboard user sees where they are. */
.error-summary:focus-visible,
.error-summary:focus {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 2px;
}

.error-summary > h2 {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--colour-danger);
}

.error-summary > ul {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.8125rem;
}

.error-summary a {
	color: var(--colour-danger);
	font-weight: 600;
}

/* Help text, hints and tile grids */

.field-help {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--colour-text-muted);
}

/* A quieter note than .field-help: what a value was before, say. */
.field-hint {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--colour-text-muted);
}

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

.import-export-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin: 1.25rem 0;
}

.result-panel {
	margin-top: 1.5rem;
}

.result-panel__list {
	margin: 0;
	padding: 0.5rem 1.25rem 1rem;
}

.result-panel__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--colour-border);
}

.result-panel__row:last-child {
	border-bottom: none;
}

.result-panel__row dt {
	color: var(--colour-text-muted);
	font-size: 0.875rem;
}

.result-panel__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.tile-card {
	display: block;
	padding: 1.25rem;
}

.tile-grid > .card + .card {
	margin-top: 0;
}

.tile-card h2 {
	margin: 0 0 0.375rem;
	font-size: 1rem;
}

.tile-card p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}

.edited-elsewhere {
	margin-left: 0.75rem;
	font-size: 0.8125rem;
	color: var(--colour-danger);
}

.notice {
	margin-bottom: 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--colour-primary-soft);
	color: var(--colour-text);
	font-size: 0.875rem;
}

.mode-toggle {
	/* It is a fieldset: no browser border, padding or margin. */
	min-width: 0;
	margin-inline: 0;
	padding: 0;
	border: 0;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

/* Confirmation modal */

.modal {
	width: min(32rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
	color: var(--colour-text);
	box-shadow: var(--shadow-md);
}

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

/* Whatever the dialog is asking about scrolls in the middle, so its title and buttons stay in view. */
.modal__body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-height: calc(100dvh - 2rem);
	padding: 1.5rem;
}

.modal__content {
	min-height: 0;
	overflow-y: auto;
}

.modal__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

.modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

/* Beside its checkbox, a link takes the room as any row's content does, so the row still wraps rather than squeeze it. */
.list-row input[type="checkbox"] + .list-row__link {
	flex: 1 1 8rem;
}

/* Where an app puts its toasts: fixed in the corner, the oldest at the bottom and newer ones stacked above it. */
.toast-region {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100;
	display: flex;
	flex-direction: column-reverse;
}

/* Gives a toast its own space in the stack, which closes up as it leaves so the ones above slide down into it. */
.toast-slot {
	display: grid;
	grid-template-rows: 1fr;
	margin-top: 0.5rem;
}

.toast-slot__inner {
	min-height: 0;
}

.toast-slot--leaving {
	animation: toast-slot-out 300ms ease-in forwards;
}

.toast-slot--leaving .toast-slot__inner {
	overflow: hidden;
}

@keyframes toast-slot-out {
	to {
		grid-template-rows: 0fr;
		margin-top: 0;
	}
}

.toast {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min(24rem, calc(100vw - 2rem));
	padding: 0.875rem 1rem;
	border: 2px solid var(--colour-primary);
	border-radius: var(--radius-md);
	background: var(--colour-surface);
	box-shadow: var(--shadow-md);
	animation: toast-in 200ms ease-out;
}

.toast--leaving {
	animation: toast-out 300ms ease-in forwards;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

.toast__tick {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--colour-success);
}

.toast__message {
	flex: 1;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--colour-text);
}

.toast__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.toast__action {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.toast__link {
	font-size: 0.8125rem;
	color: var(--colour-primary);
	white-space: nowrap;
}

.toast__link:hover {
	color: var(--colour-primary-hover);
}

.toast__dismiss {
	padding: 0;
	border: none;
	background: none;
	color: var(--colour-text-muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.toast__dismiss:hover {
	color: var(--colour-text);
}

/* A QR code is drawn dark on light whatever the colour scheme (its colours are attributes of the SVG, not tokens): swapped colours often can't be scanned. */
.qr-code {
	display: block;
	max-width: 100%;
	height: auto;
	forced-color-adjust: none;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
}

/* Codes and keys people read and type in, in a monospace face. */
.secret-key__value,
.backup-code-list code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* A key to type in by hand, with its copy button beside it. The button stays hidden until script reveals it. */
.secret-key {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.secret-key__value {
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	overflow-wrap: anywhere;
	user-select: all;
}

.secret-key__copy {
	padding: 0.25rem 0.5rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
	background: transparent;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.secret-key__copy[hidden] {
	display: none;
}

.secret-key__copy:hover {
	color: var(--colour-text);
}

/* Backup codes in two columns; a monospace face tells 0 from O and 1 from l. */
.backup-code-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0 0 0 1.75rem;
}

.backup-code-list code {
	font-size: 1rem;
	letter-spacing: 0.05em;
}

/* Centred card page rhythm: after the fields, buttons and notices whose margins it overrides, so the order settles it */

/*
 * The card sets the vertical rhythm of what it holds, so a page's markup needs no spacing of its own: the card and
 * each form in it are a column whose direct children (a paragraph, a field, a button, a link) are 1rem apart. A
 * field, notice or button that carries its own margin elsewhere gives it up here, so the gap is the only spacing.
 */
.centred-card-page__card,
.centred-card-page__card form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.centred-card-page__card .field,
.centred-card-page__card .notice {
	margin-block: 0;
}

.centred-card-page__card.form-card .field:not(:has(~ .field)) ~ .btn:not(.btn-block) {
	margin-top: 0;
}

/* A button is as wide as the card. */
.centred-card-page__card .btn {
	justify-content: center;
}

/* A link that stands alone on its line (not one inside a sentence) is a tap target of at least 44px. */
.centred-card-page__link {
	display: flex;
	margin: 0;
}

.centred-card-page__link > a,
.centred-card-page__card > a:not(.btn),
.centred-card-page__card > ul > li > a {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 2.75rem;
}

/* Something with a margin of its own gives it up, so the gap is the only spacing. */
.centred-card-page__card .error-summary {
	margin-bottom: 0;
}

/* A list of links or sessions: no bullets to sit under, each item its own block, a form in one kept to its button's width. */
.centred-card-page__card > ul {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.centred-card-page__card > ul > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.centred-card-page__card > ul > li > a {
	/* A menu of links: the 44px target already spaces them. */
	margin-block: -0.25rem;
}

.centred-card-page__card > ul > li > br {
	display: none;
}

.centred-card-page__card > ul > li > form {
	align-items: flex-start;
	margin-top: 0.5rem;
}

.centred-card-page__card > h2 {
	margin-top: 0.5rem;
	font-size: 1.0625rem;
}

/* Account page: a sidebar panel beside a content panel, on a tinted canvas */

.account-page {
	display: grid;
	grid-template-columns: 15.5rem minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
	box-sizing: border-box;
	max-width: 62rem;
	min-height: 100dvh;
	margin-inline: auto;
	padding: 1rem;
	background: var(--colour-bg);
}

.account-page__sidebar {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 1.125rem 0.75rem;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-lg);
	background: var(--colour-surface);
	box-shadow: var(--shadow-md);
}

.account-page__brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 0.5rem 0.75rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.account-page__logo {
	display: block;
	width: auto;
	height: 1.75rem;
}

.account-page__nav,
.account-page__group,
.account-page__foot {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.account-page__foot {
	margin-top: 1rem;
}

.account-page__sign-out {
	display: contents;
}

.account-page__group-label {
	padding: 0.75rem 0.625rem 0.25rem;
	color: var(--colour-text-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.account-page__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5625rem 0.625rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--colour-text);
	font: inherit;
	font-weight: 500;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.account-page__link:hover {
	background: var(--colour-bg);
	color: var(--colour-text);
}

.account-page__link[aria-current="page"] {
	background: var(--colour-primary-soft);
	color: var(--colour-primary);
}

.account-page__link--sign-out {
	color: var(--colour-danger);
}

.account-page__link--sign-out:hover {
	background: var(--colour-danger-soft);
	color: var(--colour-danger);
}

.account-page__icon {
	flex: none;
	width: 1.1875rem;
	height: 1.1875rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The content panel is the card the centred pages use, but as wide as the room. */
.account-page__panel.centred-card-page__card {
	max-width: none;
	padding: 1.5rem;
	box-shadow: var(--shadow-md);
}

.account-page__crumb {
	margin: 0;
	color: var(--colour-text-muted);
	font-size: 0.8125rem;
}

.account-page__panel > .account-page__crumb + .centred-card-page__title {
	margin-top: -0.5rem;
}

.account-page__lede {
	margin: 0;
	color: var(--colour-text-muted);
	font-size: 0.875rem;
}

.account-page__panel > .account-page__rows {
	gap: 0.625rem;
}

.account-page__panel > .account-page__rows > li.account-page__row {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-md);
}

.account-page__row > .account-page__icon {
	color: var(--colour-primary);
}

.account-page__row-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}

.account-page__row-detail {
	color: var(--colour-text-muted);
	font-size: 0.8125rem;
}

.account-page__row .btn {
	flex: none;
}

.account-page__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem 0.5rem;
	text-align: center;
}

.account-page__empty > p {
	max-width: 44ch;
	margin: 0;
}

.account-page__empty-icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-lg);
	background: var(--colour-primary-soft);
	color: var(--colour-primary);
}

.account-page__empty-icon .account-page__icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* A form keeps a readable width in the wide panel. */
.account-page__panel.centred-card-page__card > form {
	max-width: 30rem;
}

.account-page__panel > .account-page__statuses {
	gap: 0;
}

.account-page__panel > .account-page__statuses > li {
	align-items: stretch;
	border-top: 1px solid var(--colour-border);
}

.account-page__panel .account-page__status-link {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 0.75rem;
	margin: 0;
	min-height: 3.25rem;
	color: var(--colour-text);
	text-decoration: none;
}

.account-page__status-link .account-page__icon {
	color: var(--colour-text-muted);
}

.account-page__status-label {
	flex: 1;
	min-width: 0;
	font-weight: 600;
}

.account-page__status-link:hover .account-page__status-label {
	color: var(--colour-primary);
}

.account-page__status-value {
	min-width: 0;
	color: var(--colour-text-muted);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
	text-align: end;
}

.account-page__pill {
	padding: 0.1875rem 0.5625rem;
	border: 1px solid var(--colour-border);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.account-page__pill--good {
	border-color: var(--colour-success);
	color: var(--colour-success);
}

.account-page__pill--attention {
	border-color: var(--colour-danger);
	background: var(--colour-danger-soft);
	color: var(--colour-danger);
}

.account-page__pill--neutral {
	background: var(--colour-bg);
	color: var(--colour-text-muted);
}

.account-page__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-md);
	background: var(--colour-primary-soft);
}

.account-page__banner-text {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: 0.125rem;
	font-size: 0.875rem;
}

.account-page__panel .account-page__banner .btn {
	flex: none;
}

/* A phone: the sidebar is a wrapped row of links above the content. */
@media (max-width: 760px) {
	.account-page {
		grid-template-columns: minmax(0, 1fr);
		padding: 0.75rem;
	}

	.account-page__sidebar,
	.account-page__nav,
	.account-page__group,
	.account-page__foot {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.account-page__sidebar {
		padding: 0.5rem;
	}

	.account-page__brand,
	.account-page__group-label {
		display: none;
	}

	.account-page__foot {
		margin-top: 0;
	}

	.account-page__link {
		width: auto;
	}

	.account-page__panel.centred-card-page__card {
		padding: 1.25rem 1rem;
	}
}