:where(:root, [data-theme="default"]) {
	
	--colour-primary: light-dark(#4f46e5, #818cf8);
	
	--colour-primary-hover: light-dark(#4338ca, #a5b4fc);
	
	--colour-primary-soft: light-dark(#eef2ff, #1e1b4b);
	
	--colour-on-primary: light-dark(#ffffff, #0f172a);
	
	--colour-danger: light-dark(#b91c1c, #f87171);
	
	--colour-danger-hover: light-dark(#991b1b, #fca5a5);
	
	--colour-danger-soft: light-dark(#fef2f2, #450a0a);
	
	--colour-ok: light-dark(#15803d, #4ade80);
	
	--colour-ok-soft: light-dark(#f0fdf4, #052e16);
	
	--colour-warning: light-dark(#92400e, #fbbf24);
	
	--colour-warning-soft: light-dark(#fffbeb, #422006);
	
	--colour-info: light-dark(#1d4ed8, #93c5fd);
	
	--colour-info-soft: light-dark(#eff6ff, #172554);
	
	--colour-neutral-soft: light-dark(#f1f5f9, #334155);

	
	--colour-bg: light-dark(#f8fafc, #0f172a);
	
	--colour-surface: light-dark(#ffffff, #1e293b);
	
	--colour-border: light-dark(#e2e8f0, #334155);
	
	--colour-border-strong: light-dark(#8393a8, #64748b);
	
	--colour-overlay: rgb(15 23 42 / 0.45);

	
	--colour-text: light-dark(#0f172a, #f1f5f9);
	
	--colour-text-muted: light-dark(#64748b, #94a3b8);
	
	--colour-text-faint: light-dark(#94a3b8, #64748b);

	
	--colour-on-avatar: #ffffff;
	
	--avatar-saturation: 55%;
	
	--avatar-lightness: 30%;

	
	--radius-sm: 6px;
	
	--radius-md: 10px;
	
	--radius-lg: 14px;

	
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	
	--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

	
	--focus-ring-width: 2px;

	
	--font-sans: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", ui-sans-serif, Roboto, Arial, sans-serif;
	
	--font-size-base: 15px;
	
	--font-heading: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", ui-sans-serif, Roboto, Arial, sans-serif;
	
	--font-figures: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", ui-sans-serif, Roboto, Arial, sans-serif;
	
	--font-size-small: 0.875rem;
	
	--font-size-xs: 0.75rem;
	
	--font-size-title: 1.375rem;
	
	--font-size-section: 1rem;
	
	--font-weight-heading: 600;
	
	--font-weight-section: 600;
	
	--font-tracking-heading: -0.01em;
	
	--font-tracking-section: -0.01em;
	
	--font-case-section: none;
	
	--font-weight-tag: 600;
	
	--font-tracking-tag: 0em;
	
	--font-case-tag: none;

	
	--space-page-x: 1.5rem;
	
	--space-page-y: 2.5rem;
	
	--space-page-x-narrow: 1rem;
	
	--space-page-y-narrow: 1.5rem;
	
	--space-stack: 1.25rem;
	
	--space-card-x: 1.25rem;
	
	--space-card-y: 1rem;
	
	--space-row-y: 1rem;

	
	--size-sidebar: 220px;
	
	--size-control: 2.75rem;
	
	--space-control-x: 1rem;
	
	--space-control-y: 0.5625rem;

	
	--border-card: 1px solid var(--colour-border);
	
	--border-card-header: 1px solid var(--colour-border);
	
	--border-row: 1px solid var(--colour-border);
	
	--border-sidebar: 1px solid var(--colour-border);
	
	--border-header: 1px solid var(--colour-border);
	
	--border-tag: 0 solid currentColor;
	
	--radius-mark: var(--radius-sm);
	
	--radius-tag: 999px;

	
	--colour-hover: light-dark(#f8fafc, #0f172a);
	
	--colour-card-header: #00000000;
	
	--colour-header: light-dark(#ffffff, #1e293b);
	
	--colour-sidebar: light-dark(#ffffff, #1e293b);
	
	--colour-sidebar-text: light-dark(#64748b, #94a3b8);
	
	--colour-sidebar-text-strong: light-dark(#0f172a, #f1f5f9);
	
	--colour-sidebar-hover: light-dark(#f8fafc, #0f172a);
	
	--colour-sidebar-active: light-dark(#eef2ff, #1e1b4b);
	
	--colour-sidebar-active-text: light-dark(#4f46e5, #818cf8);
	
	--colour-sidebar-primary: light-dark(#4f46e5, #818cf8);
	
	--colour-on-sidebar-primary: light-dark(#ffffff, #0f172a);
}


:root {
	--size-tap: 2.75rem;
}


:root {
	--size-chat-dock: 24rem;
}

@media (pointer: fine) and (not (any-pointer: coarse)) {
	:root {
		--size-tap: 0rem;
	}
}


: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;
}


: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-family: var(--font-heading);
	font-weight: var(--font-weight-heading);
	letter-spacing: var(--font-tracking-heading);
}

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

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


a:not([class]) {
	text-decoration: underline;
}

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




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


.app-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

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

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

.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: var(--font-size-small);
	font-weight: 600;
	color: var(--colour-sidebar-text);
}

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


.sidebar-nav__link[aria-current="page"] {
	background: var(--colour-sidebar-active);
	color: var(--colour-sidebar-active-text);
}


:where([data-theme]) {
	--colour-sidebar-rule: initial;
	--colour-sidebar-label: initial;
}


.sidebar-nav__group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--colour-sidebar-rule, color-mix(in srgb, var(--colour-sidebar-text) 30%, transparent));
}


.sidebar-nav__group:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}


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


.app-top {
	display: contents;
}

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


.app-top__logo {
	display: none;
}


.app-sidebar {
	display: contents;
}

@media (width > 900px) {
	.app-sidebar {
		display: flex;
		position: sticky;
		top: 0;
		align-self: flex-start;
		flex-shrink: 0;
		height: 100dvh;
		overflow-y: auto;
	}

	.app-sidebar .sidebar {
		min-height: min-content;
	}
}

.app-sidebar__backdrop {
	display: none;
}


@media (max-width: 900px) {
	.app-top {
		display: flex;
		align-items: center;
		padding-left: 0.75rem;
		background: var(--colour-header);
		border-bottom: var(--border-header);
	}

	.app-top__menu-button {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		
		align-self: flex-start;
		width: 2.75rem;
		height: 2.75rem;
		margin-top: 0.625rem;
		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-top__logo {
		--tenant-logo-height: 1.5rem;
		display: flex;
		flex: 0 1 auto;
		align-self: flex-start;
		min-width: 2rem;
		max-width: 12rem;
		margin-top: calc(0.625rem + (2.75rem - var(--tenant-logo-height)) / 2);
	}

	
	.app-top__logo > a {
		display: flex;
		align-items: center;
		min-width: 0;
		min-height: 2.75rem;
		margin-block: calc((var(--tenant-logo-height) - 2.75rem) / 2);
		color: var(--colour-text);
	}

	.app-top__logo > a:hover {
		color: var(--colour-text);
	}

	
	.app-top:has(> .app-top__logo) .app-header {
		flex: 1 0 auto;
		max-width: calc(100% - 2.75rem - 2rem);
	}

	.app-top:has(> .app-top__logo) .app-header > .badge {
		display: none;
	}

	.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;
		
		transition:
			transform 0.2s ease,
			visibility 0s linear 0.2s;
	}

	
	.app-sidebar .sidebar .brand {
		min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	}

	.app-sidebar .sidebar-nav__link {
		padding-block: max(0.5rem, calc((max(var(--size-control), var(--size-tap), 1.5rem) - 1lh) / 2));
	}

	
	.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-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--colour-text);
	letter-spacing: -0.01em;
}

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


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


.brand--logo {
	display: flex;
	min-width: 0;
	max-width: 100%;
}


@media (width > 900px) {
	.app-shell .sidebar > .brand--logo {
		position: relative;
		top: calc(0.75rem + 2.75rem / 2 - 1.5rem - var(--tenant-logo-height, 2rem) / 2);
	}
}


.sidebar-foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	font-size: var(--font-size-small);
	color: var(--colour-sidebar-text);
}

.sidebar-foot__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--radius-mark);
	background: var(--colour-sidebar-primary);
	color: var(--colour-on-sidebar-primary);
	font-size: var(--font-size-xs);
	font-weight: 700;
}

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


.brand-mark--image {
	background: none;
	color: inherit;
}

.brand-mark--image > img,
.brand-mark--image > svg,
.sidebar-foot__mark--image > img,
.sidebar-foot__mark--image > svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sidebar-foot__mark--image {
	background: none;
	color: inherit;
}


.app-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding: 0.75rem 1.5rem;
	background: var(--colour-header);
	border-bottom: var(--border-header);
}

@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;
	}

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


@media (max-width: 600px) {
	.app-header > .badge {
		max-width: none;
		overflow: visible;
		overflow-wrap: anywhere;
		white-space: normal;
		border-radius: min(var(--radius-tag), 1rem);
	}

	.app-top .app-header {
		align-items: flex-start;
	}

	
	.app-top .app-header__actions {
		min-height: 2.75rem;
	}

	.app-top .app-header > .tenant-picker {
		margin-top: calc((2.75rem - max(var(--size-control), var(--size-tap), 1.5rem, 1lh + 0.75rem + 2px)) / 2);
	}

	.app-top .app-header > .badge {
		margin-top: 0.625rem;
		
		padding-block: max(0px, calc((1.5rem - 1lh) / 2));
	}
}


.switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	text-align: start;
	color: var(--colour-text);
	cursor: pointer;
}

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


.switch:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}


.switch__label {
	flex: 1 1 auto;
	min-width: 0;
}


.switch__control {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.375rem;
	color: var(--colour-text-muted);
}


.switch__track {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	width: 2.25rem;
	height: 1.25rem;
	padding: 0.125rem;
	border-radius: 999px;
	background: var(--colour-text-muted);
}

.switch[aria-checked="true"] .switch__track {
	background: var(--colour-primary);
}


.switch__thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--colour-surface);
}

.switch[aria-checked="true"] .switch__thumb {
	transform: translateX(1rem);
}


@media (forced-colors: active) {
	.switch__track {
		
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.switch__thumb {
		background: CanvasText;
	}
}


@media (prefers-reduced-motion: no-preference) {
	.switch__thumb {
		transition: transform 120ms ease;
	}
}


.user-menu {
	position: relative;
	margin-left: auto;
}


.app-header__actions {
	display: flex;
	align-items: center;
	gap: inherit;
	margin-left: auto;
}

.app-header__actions ~ .user-menu {
	margin-left: 0;
}

.user-menu__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.user-menu__trigger:hover {
	background: var(--colour-bg);
}

.user-menu__trigger:focus-visible {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 1px;
}

.user-menu__panel {
	position: absolute;
	top: calc(100% + 0.25rem);
	right: 0;
	
	z-index: 90;
	width: 17rem;
	max-width: calc(100vw - 2rem);
	padding: 0.375rem;
	background: var(--colour-surface);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.user-menu__panel[hidden] {
	display: none;
}


.user-menu__who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.625rem 0.75rem;
	border-bottom: 1px solid var(--colour-border);
	margin-bottom: 0.375rem;
}

.user-menu__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.user-menu__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--colour-text);
	overflow-wrap: anywhere;
}

.user-menu__email {
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
	overflow-wrap: anywhere;
}


.user-menu__scheme {
	padding: 0.25rem 0.625rem 0.75rem;
	border-bottom: 1px solid var(--colour-border);
	margin-bottom: 0.375rem;
}


.user-menu__scheme .switch {
	font-size: 0.875rem;
	font-weight: 600;
}


.user-menu__match-device {
	display: inline-flex;
	align-items: center;
	min-height: max(var(--size-tap), 1.5rem);
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.75rem;
	color: var(--colour-primary);
	text-decoration: underline;
	cursor: pointer;
}

.user-menu__match-device:hover {
	color: var(--colour-primary-hover);
}

.user-menu__match-device:focus-visible {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}


.user-menu__separator {
	margin: 0.375rem 0;
	border: none;
	border-top: 1px solid var(--colour-border);
}

.user-menu__item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.625rem;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	color: var(--colour-text);
	cursor: pointer;
}

.user-menu__item:hover {
	background: var(--colour-bg);
	color: var(--colour-text);
}

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

.user-menu__item--danger,
.user-menu__item--danger:hover {
	color: var(--colour-danger);
}


@media (max-width: 900px) {
	.user-menu__item {
		min-height: 2.75rem;
	}
}


.tenant-picker {
	width: auto;
	min-width: 0;
	
	min-height: 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;
}


@media (max-width: 900px) {
	.tenant-picker {
		min-height: max(var(--size-control), var(--size-tap), 1.5rem);
		max-width: 11rem;
	}
}


@media (max-width: 600px) {
	.tenant-picker {
		max-width: calc(100% - 2.5rem);
	}
}



.page {
	flex: 1;
	min-width: 0;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-page-y) var(--space-page-x) calc(var(--space-page-y) + 1.5rem);
}


@media (max-width: 600px) {
	.page {
		padding: var(--space-page-y-narrow) var(--space-page-x-narrow) calc(var(--space-page-y-narrow) + 1.5rem);
	}
}

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


.page-header:has(> .page-header__title, > .page-header__identity) {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.75rem 1rem;
}


:where(.page-header) > :where(.page-header__title, .page-header__identity) {
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: anywhere;
}


:where(.page-header:has(> .page-header__title, > .page-header__identity))
> :where(:not(.page-header__title, .page-header__identity)) {
	flex: 0 0 auto;
	max-width: 100%;
}

.page-header h1 {
	font-size: var(--font-size-title);
}


.page-header__identity {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.page-subtitle {
	margin-top: 0.25rem;
	font-size: var(--font-size-small);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	
	--back-link-height: max(var(--size-control), var(--size-tap), 1.5rem);
	min-height: var(--back-link-height);
	
	min-width: var(--back-link-height);
	margin-block: calc((1.375rem - var(--back-link-height)) / 2)
		calc(1.1875rem - (var(--back-link-height) - 1.375rem) / 2);
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--colour-text-muted);
}

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



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

.card + .card {
	margin-top: var(--space-stack);
}



.summary-list {
	container-type: inline-size;
	margin: 0;
	padding: 0.25rem var(--space-card-x);
}

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

.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;
	}
}


.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;
}


.user-menu__who .user-avatar {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0.875rem;
}


.tenant-logo {
	display: block;
	height: var(--tenant-logo-height, 2rem);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}


.tenant-logo--text {
	font-family: var(--font-heading);
	font-size: var(--font-size-section);
	font-weight: 700;
	line-height: var(--tenant-logo-height, 2rem);
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.file-input {
	width: 100%;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	font: inherit;
	color: var(--colour-text);
}

.file-input::file-selector-button {
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	margin-right: 0.75rem;
	padding: var(--space-control-y) var(--space-control-x);
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--colour-text);
	background: var(--colour-surface);
	border: 1px solid var(--colour-border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.file-input:not(:disabled):hover::file-selector-button {
	background: var(--colour-bg);
	border-color: var(--colour-text-faint);
}

.file-input:focus-visible {
	outline: none;
}

.file-input:focus-visible::file-selector-button {
	border-color: var(--colour-primary);
	box-shadow: 0 0 0 calc(var(--focus-ring-width) + 1px) var(--colour-primary-soft);
}

.file-input:disabled::file-selector-button {
	cursor: not-allowed;
	color: var(--colour-text-faint);
	background: var(--colour-bg);
	border-color: var(--colour-border);
}


.file-field__preview {
	margin-bottom: 0.5rem;
}


.file-field__preview:empty {
	display: none;
}


.card-title {
	padding: var(--space-card-y) var(--space-card-x);
	border-bottom: var(--border-card-header);
	background: var(--colour-card-header);
	font-family: var(--font-heading);
	font-size: var(--font-size-section);
	font-weight: var(--font-weight-section);
	letter-spacing: var(--font-tracking-section);
	text-transform: var(--font-case-section);
}



.card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: var(--space-card-y) var(--space-card-x);
	border-bottom: var(--border-card-header);
	background: var(--colour-card-header);
}


.card-header > .card-title {
	padding: 0;
	border-bottom: none;
}

.card-header__action {
	flex-shrink: 0;
	font-size: var(--font-size-small);
	font-weight: 500;
}


.card-header__action > a,
.card-header__action > button {
	display: inline-flex;
	align-items: center;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	
	min-width: var(--size-tap);
	justify-content: flex-end;
	margin-block: -0.625rem;
}


.card-body {
	padding: var(--space-card-y) var(--space-card-x);
}

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

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



.command-card {
	padding: var(--space-card-y) var(--space-card-x);
	border-bottom: var(--border-row);
}

.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;
}


.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);
}


.command-card__irreversible {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
	text-align: right;
}



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


.list-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: var(--space-row-y) var(--space-card-x);
	
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	border-bottom: var(--border-row);
	transition: background-color 120ms ease;
}

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

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


:where(.list-row, .item-row) > :where(:first-child):not(.list-row__meta, input, .select-target) {
	flex: 1 1 8rem;
	min-width: 0;
}


.list-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	min-width: 0;
}


.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);
}


.list-row .list-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
}


:where(.list-row)
:where(
	button,
	a:not(.list-row__link),
	input,
	select,
	textarea,
	form,
	label,
	summary,
	[role="button"],
	[title],
	.user-avatar
):where(:not(.list-row__link, :has(.list-row__link))) {
	position: relative;
	z-index: 1;
}


.list-row .list-row__link:focus-visible {
	outline: none;
}

.list-row:has(.list-row__link:focus-visible) {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: calc(-1 * var(--focus-ring-width));
}


.list-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem var(--space-card-x);
	border-bottom: var(--border-row);
}


.select-target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	cursor: pointer;
}


.audit-list-entry {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1 1 14rem;
	min-width: 0;
}

.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);
	
	overflow-wrap: anywhere;
}


.audit-card-note,
.audit-list-entry__on-behalf,
.audit-list-entry__more {
	margin: 0;
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}

.audit-card-note {
	padding: 0.75rem 1.25rem 0;
}

.audit-list-entry__more {
	margin-top: -0.25rem;
}

.audit-list-entry__on-behalf {
	
	overflow-wrap: anywhere;
}


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


.list-row__identity:has(> .field-hint) {
	flex-wrap: wrap;
	row-gap: 0;
}


.list-row__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}


.list-row__secondary {
	color: var(--colour-text-muted);
	font-size: 0.875rem;
}


.api-key-row {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	overflow-wrap: anywhere;
}


.item-row {
	overflow-wrap: anywhere;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: calc(var(--space-row-y) - 0.125rem) var(--space-card-x);
	border-bottom: var(--border-row);
}

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

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




.figure {
	font-family: var(--font-figures);
	font-variant-numeric: tabular-nums;
}



.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5rem;
	border: var(--border-tag);
	border-radius: var(--radius-tag);
	background: var(--colour-primary-soft);
	color: var(--colour-primary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-tag);
	letter-spacing: var(--font-tracking-tag);
	text-transform: var(--font-case-tag);
	white-space: nowrap;
}


.badge--ok {
	background: var(--colour-ok-soft);
	color: var(--colour-ok);
}

.badge--problem {
	background: var(--colour-danger-soft);
	color: var(--colour-danger);
}

.badge--warning {
	background: var(--colour-warning-soft);
	color: var(--colour-warning);
}

.badge--info {
	background: var(--colour-info-soft);
	color: var(--colour-info);
}

.badge--neutral {
	background: var(--colour-neutral-soft);
	color: var(--colour-text);
}



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


.card .empty-state:not(:has(.empty-state__image)) {
	padding: 1.25rem 1.5rem;
}

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



.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: var(--font-size-title);
}

.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;
}


.error-page__details {
	max-width: 100%;
	margin: 1.5rem auto 0;
	text-align: left;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	color: var(--colour-text);
}



.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;
}



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


.form-card > .card-title,
.form-card > .card-header {
	margin: -1.5rem -1.25rem 1.25rem;
}

.field {
	margin-bottom: 1.25rem;
}


.field:not(:has(~ .field)) {
	margin-bottom: 0;
}


.form-card .field:not(:has(~ .field), :has(~ .field-group), :has(~ .field-cluster)) ~ .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);
}


.field-inline label {
	display: flex;
	align-items: center;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	gap: 0.5rem;
	margin-bottom: 0;
	font-size: var(--font-size-small);
	font-weight: 400;
	color: var(--colour-text);
}


.field-inline > label > input {
	flex: none;
	width: 13px;
	height: 13px;
	margin: 0;
}


.notification-settings > [role="alert"]:focus-visible,
.notification-settings > [role="alert"]:focus {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 2px;
}


.field-group {
	min-width: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}


.field-cluster {
	display: flex;
	flex-direction: column;
	gap: var(--space-stack);
}

.field-cluster > .field,
.field-cluster > .field-group {
	margin-bottom: 0;
}


.field ~ .field-cluster {
	margin-top: var(--space-stack);
}

.field-cluster + .field,
.field-cluster + .field-group,
.field-cluster + .field-cluster {
	margin-top: var(--space-stack);
}

.form-card .field-cluster ~ .btn:not(.btn-block) {
	margin-top: var(--space-stack);
}


.form-card > form + form {
	margin-top: var(--space-stack);
}


.field ~ .field-group {
	margin-top: 1.25rem;
}


.field-group > legend {
	margin-bottom: 0.375rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}


.field-group-of-fields > legend {
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
	color: var(--colour-text);
}


.field-group > .field-inline:not(:last-of-type) {
	margin-bottom: 0.5rem;
}


.field ~ .permission-picker {
	margin-top: 1.25rem;
}


.permission-picker fieldset fieldset {
	min-width: 0;
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
}

.permission-picker fieldset fieldset legend {
	padding: 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.permission-picker .field {
	margin-bottom: 0.375rem;
}


.notification-settings > h2 {
	font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input:not([type]),
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	padding: var(--space-control-y) calc(var(--space-control-x) - 0.25rem);
	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;
}


.password-input {
	position: relative;
	display: block;
}

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


.password-input__toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	min-width: 2.75rem;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	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="tel"]::placeholder,
input[type="search"]::placeholder,
input:not([type])::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="tel"]:focus,
input[type="search"]:focus,
input:not([type]):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);
}



.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: var(--space-control-y) var(--space-control-x);
	
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	font: inherit;
	font-weight: 600;
	font-size: var(--font-size-small);
	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;
}


.btn[hidden] {
	display: none;
}

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


.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);
}


.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: max(0rem, calc(var(--space-control-y) - 0.1875rem)) max(0rem, calc(var(--space-control-x) - 0.375rem));
	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;
}


.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%);
	}
}


@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;
}


.field .form-error,
.field-group > .form-error {
	margin: 0.375rem 0 0;
}

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


.field.field-invalid input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.field.field-invalid select,
.field.field-invalid textarea,
.field-group.field-invalid:not(.field-group-of-fields) input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.field-group.field-invalid:not(.field-group-of-fields) select,
.field-group.field-invalid:not(.field-group-of-fields) textarea {
	border-color: var(--colour-danger);
}


.field.field-invalid input:is([type="checkbox"], [type="radio"]),
.field-group.field-invalid:not(.field-group-of-fields) input:is([type="checkbox"], [type="radio"]) {
	box-shadow: 0 0 0 var(--focus-ring-width) var(--colour-danger);
}


.field-group-of-fields.field-invalid {
	padding-left: 0.75rem;
	border-left: var(--focus-ring-width) solid var(--colour-danger);
}


.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);
}


.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 {
	display: inline-flex;
	align-items: center;
	min-height: max(var(--size-tap), 1.5rem);
	color: var(--colour-danger);
	font-weight: 600;
}



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


.field-inline .field-help {
	margin-top: -0.625rem;
	padding-left: calc(13px + 0.5rem);
}


input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--colour-primary);
}


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

.connect-source {
	margin: 0;
}

.connect-source > span {
	display: block;
}


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


.select-field__control {
	max-width: 22.5rem;
}


.field-hint:has(> .select-field__hint:empty) {
	margin-top: 0;
}

.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: var(--border-row);
}

.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: var(--space-stack);
	padding: 0.875rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--colour-primary-soft);
	color: var(--colour-text);
	font-size: var(--font-size-small);
}


.notice p,
.notice a {
	color: inherit;
}


.notice--ok {
	border-inline-start: 0.25rem solid var(--colour-ok);
	background: var(--colour-ok-soft);
}


.notice--problem {
	border: var(--focus-ring-width) solid var(--colour-danger);
	border-inline-start-width: 0.25rem;
	background: var(--colour-danger-soft);
}

.notice--warning {
	border-inline-start: 0.25rem solid var(--colour-warning);
	background: var(--colour-warning-soft);
}

.notice--info {
	border-inline-start: 0.25rem solid var(--colour-info);
	background: var(--colour-info-soft);
}

.notice--neutral {
	border-inline-start: 0.25rem solid var(--colour-text-muted);
	background: var(--colour-neutral-soft);
}

.mode-toggle {
	
	min-width: 0;
	margin-inline: 0;
	padding: 0;
	border: 0;
	display: flex;
	
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--space-stack);
}


.mode-toggle > * {
	margin-block: 0;
}


.mode-toggle.card-body {
	padding: var(--space-card-y) var(--space-card-x);
	margin-bottom: 0;
}


.mode-toggle > .segmented-choice {
	
	display: inline-flex;
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--colour-text);
}

.segmented-choice:has(input:checked) {
	background: var(--colour-primary);
	border-color: transparent;
	color: var(--colour-on-primary);
}

.segmented-choice:has(input:checked):hover {
	background: var(--colour-primary-hover);
	color: var(--colour-on-primary);
}

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



.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);
	
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
}

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


.modal__body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	
	max-height: calc(100dvh - 2rem - 2px);
	padding: 1.5rem;
}


.modal__content {
	min-height: 0;
	margin: -0.25rem;
	padding: 0.25rem;
	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;
}


.modal__lead,
.modal__changed p,
.modal__resolved p {
	font-size: var(--font-size-small);
	font-weight: 600;
}

.modal__changed,
.modal__resolved {
	margin-bottom: var(--space-row-y);
}

.modal__summary,
.modal__problems,
.modal__quiet,
.modal__removed,
.modal__added {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-row-y) / 2);
	margin: calc(var(--space-row-y) / 2) 0 var(--space-row-y);
	padding: 0;
	list-style: none;
}

.modal__summary li,
.modal__problems li,
.modal__quiet li,
.modal__removed li,
.modal__added li {
	padding: calc(var(--space-row-y) * 0.75) calc(var(--space-card-x) * 0.8);
	border: var(--border-card);
	border-radius: var(--radius-md);
	background: var(--colour-surface);
	box-shadow: var(--shadow-sm);
	line-height: 1.4;
}

.modal__summary li {
	border-inline-start: 0.25rem solid var(--colour-primary);
	font-weight: 500;
}

.modal__problems li {
	border-color: var(--colour-danger-soft);
	border-inline-start: 0.25rem solid var(--colour-danger);
	background: var(--colour-danger-soft);
	color: var(--colour-danger-hover);
}

.modal__quiet li {
	background: var(--colour-bg);
	color: var(--colour-text-muted);
}

.modal__removed li {
	border-color: var(--colour-danger-soft);
	background: var(--colour-danger-soft);
	color: var(--colour-danger);
	text-decoration: line-through;
}

.modal__added li {
	border-color: var(--colour-primary-soft);
	border-inline-start: 0.25rem solid var(--colour-primary);
	background: var(--colour-primary-soft);
	color: var(--colour-primary-hover);
}


.list-row .select-target + .list-row__link {
	flex: 1 1 8rem;
}

.list-row input[type="checkbox"] + .list-row__link {
	flex: 1 1 8rem;
}


.toast-region {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100;
	display: flex;
	flex-direction: column-reverse;
}


.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-ok);
}

.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 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -0.625rem -0.75rem -0.625rem -0.5rem;
	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);
}


.qr-code {
	display: block;
	max-width: 100%;
	height: auto;
	forced-color-adjust: none;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
}


.secret-key__value,
.backup-code-list code,
.api-key-row code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


.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);
}


.token-reveal__expiry {
	margin: 0 0 1.25rem;
}

.token-reveal__token {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.token-reveal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.token-reveal__status {
	min-height: 1.25rem;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}


.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__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;
}

.centred-card-page__card.form-card > form + form {
	margin-top: 0;
}


.centred-card-page__card .btn {
	justify-content: center;
}


.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;
}


.centred-card-page__card .error-summary {
	margin-bottom: 0;
}


.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 {
	
	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 {
	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;
}


.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;
	
	flex-wrap: wrap;
	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 1 9rem;
	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;
}


.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: var(--radius-tag);
	font-size: var(--font-size-xs);
	font-weight: 600;
	white-space: nowrap;
}

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

.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-neutral-soft);
	color: var(--colour-text);
}

.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;
}


@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;
	}
}




.feedback-button {
	gap: 0.5rem;
}

.feedback-button__icon {
	flex: none;
}


@media (max-width: 900px) {
	.feedback-button {
		min-width: 2.75rem;
		
		padding-inline: 0;
	}

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


.feedback-dialog {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.feedback-dialog > *,
.feedback-dialog .field {
	margin: 0;
}

.feedback-dialog textarea {
	min-height: 7.5rem;
}


.feedback-dialog__counter {
	display: block;
	text-align: right;
	font-variant-numeric: tabular-nums;
}


.feedback-dialog__note {
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}


.feedback-screenshot {
	
	scroll-margin-block: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.feedback-screenshot > * {
	margin: 0;
}

.feedback-screenshot__title {
	scroll-margin-block: 0.5rem;
	font-size: 0.875rem;
}

.feedback-screenshot__image {
	display: block;
	
	align-self: flex-start;
	max-width: 100%;
	max-height: 14rem;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
}

.feedback-screenshot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}


.feedback-disclosure {
	font-size: 0.875rem;
	color: var(--colour-text-muted);
}


.feedback-disclosure summary {
	display: list-item;
	padding-block: 0.75rem;
	cursor: pointer;
}

.feedback-disclosure summary:focus-visible,
.feedback-screenshot__title:focus-visible {
	outline: var(--focus-ring-width) solid var(--colour-primary);
	outline-offset: 2px;
}

.feedback-disclosure ul {
	margin: 0;
	padding-left: 1.25rem;
	overflow-wrap: anywhere;
}


.feedback-sent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.feedback-sent > p {
	margin: 0;
}

.feedback-sent__tick {
	color: var(--colour-ok);
}


.feedback-row {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	overflow-wrap: anywhere;
}


.assistant-usage-row {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	overflow-wrap: anywhere;
}


.feedback-message {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}


.feedback-detail-screenshot {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--colour-border);
	border-radius: var(--radius-sm);
}




.avatar {
	flex-shrink: 0;
	border-radius: 50%;
	vertical-align: middle;
}


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


.list-row .select-target + .agent-identity {
	flex: 1 1 8rem;
}

.permissions-picker {
	border: none;
	padding: 0;
	margin: 0 0 1.25rem;
}

.permissions-picker legend {
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

.permissions-picker__buttons {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.permissions-picker__group h3 {
	margin: 1rem 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

.permissions-picker__option {
	padding: 0.25rem 0;
}

.permissions-picker__option label {
	color: var(--colour-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.permissions-picker__option details {
	margin-left: 1.5rem;
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
}

.permissions-picker__option summary {
	cursor: pointer;
}

.permissions-picker__option details p {
	margin: 0.25rem 0 0;
}

.photo-picker {
	border: none;
	padding: 0;
	margin: 0 0 1.25rem;
}


.field ~ .photo-picker,
.field ~ .permissions-picker {
	margin-top: 1.25rem;
}

.photo-picker legend {
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--colour-text-muted);
}

.photo-picker__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.photo-picker__option {
	position: relative;
	cursor: pointer;
}

.photo-picker__option input {
	position: absolute;
	opacity: 0;
}

.photo-picker__option .avatar {
	display: block;
	border: 3px solid transparent;
}

.photo-picker__option input:checked + .avatar {
	border-color: var(--colour-primary);
}

.photo-picker__option input:focus-visible + .avatar {
	outline: 2px solid var(--colour-primary);
	outline-offset: 2px;
}

.chat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.chat__message {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: 85%;
}

.chat__message--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.chat__bubble {
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--colour-border);
	border-radius: 1rem;
	background: var(--colour-surface);
	color: var(--colour-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}


.chat__bubble--markdown {
	white-space: normal;
}

.chat__bubble.chat__bubble--markdown p,
.chat__bubble.chat__bubble--markdown ul,
.chat__bubble.chat__bubble--markdown ol {
	margin: 0.5rem 0;
}

.chat__bubble.chat__bubble--markdown > :first-child {
	margin-top: 0;
}

.chat__bubble.chat__bubble--markdown > :last-child {
	margin-bottom: 0;
}

.chat__bubble.chat__bubble--markdown ul,
.chat__bubble.chat__bubble--markdown ol {
	padding-left: 1.25rem;
}

.chat__bubble--markdown code {
	padding: 0.1em 0.3em;
	border-radius: 0.25rem;
	background: var(--colour-bg);
	font-size: 0.9em;
}


.chat__thinking {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2.5rem;
}

.chat__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--colour-text-faint);
	animation: chat-dot 1.2s ease-in-out infinite;
}

.chat__dot:nth-child(2) {
	animation-delay: 0.2s;
}

.chat__dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes chat-dot {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(-0.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chat__dot {
		animation: none;
		opacity: 0.7;
	}
}


.chat__bubble,
.chat__bubble p,
.chat__bubble li {
	color: var(--colour-text);
}

.chat__message--user .chat__bubble {
	border-color: var(--colour-primary);
	background: var(--colour-primary-soft);
}

.chat__composer {
	display: flex;
	gap: 0.5rem;
	align-items: flex-end;
}

.chat__composer textarea {
	flex: 1;
	margin: 0;
}


.chat-row {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chat-row__preview {
	overflow: hidden;
	font-size: 0.8125rem;
	color: var(--colour-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}


.chat__note {
	margin: 0.75rem 0 0;
	padding-left: 0.75rem;
	border-left: 3px solid var(--colour-border-strong);
	color: var(--colour-text-muted);
	font-style: italic;
}

.chat__status {
	margin: 0 0 1rem;
	color: var(--colour-text-muted);
}


.chat-dock {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	width: var(--size-chat-dock);
	background: var(--colour-surface);
	border-left: 1px solid var(--colour-border);
}


body:has(.chat-dock) .app-shell {
	margin-right: var(--size-chat-dock);
}

.chat-dock__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--colour-border);
}

.chat-dock__title {
	
	line-height: max(var(--size-control), var(--size-tap), 1.5rem);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	color: var(--colour-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}


.chat-dock__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	padding: 1rem;
}

.chat-dock__body > .chat {
	flex: 1 1 auto;
	min-height: 0;
	margin-bottom: 0.75rem;
	overflow-y: auto;
}

.chat-dock__body > :not(.chat) {
	flex: none;
}

.chat-dock__icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(var(--size-control), var(--size-tap), 1.5rem);
	height: max(var(--size-control), var(--size-tap), 1.5rem);
	padding: 0;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--colour-text-muted);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.chat-dock__icon-button:hover {
	background: var(--colour-bg);
	color: var(--colour-text);
}

.chat-tabs {
	position: fixed;
	right: 1rem;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: flex-end;
	gap: 0.5rem;
	max-width: calc(100vw - 2rem);
}

.chat-tabs__tab {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0.375rem 0.375rem 0.5rem;
	border: 1px solid var(--colour-border);
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	background: var(--colour-surface);
	box-shadow: var(--shadow-md);
}

.chat-tabs__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: max(var(--size-control), var(--size-tap), 1.5rem);
	max-width: 12rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--colour-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.chat-tabs__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


body:has(.chat-dock) .chat-tabs,
body:has(.chat-dock) .toast-region {
	right: calc(var(--size-chat-dock) + 1rem);
}

body:has(.chat-tabs) .toast-region {
	bottom: 3.5rem;
}

@media (max-width: 900px) {
	.chat-dock {
		width: min(var(--size-chat-dock), 100vw);
		box-shadow: var(--shadow-md);
	}

	body:has(.chat-dock) .app-shell {
		margin-right: 0;
	}

	body:has(.chat-dock) .chat-tabs,
	body:has(.chat-dock) .toast-region {
		right: 1rem;
	}
}


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




@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-cyrillic-ext-wght-normal-2317fa4bb2.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}


@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-cyrillic-wght-normal-6894439694.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}


@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-vietnamese-wght-normal-8fa40e5d24.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}


@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-ext-wght-normal-824f485b5d.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-wght-normal-19f9c92546.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

[data-theme="console"] {
	
	--console-ring: light-dark(rgb(16 18 24 / 0.08), rgb(255 255 255 / 0.07));
	--console-shadow: light-dark(rgb(16 18 24 / 0.06), rgb(0 0 0 / 0.4));

	--colour-primary: light-dark(#b13d17, #ff6a3d);
	--colour-primary-hover: light-dark(#963413, #ff8559);
	--colour-primary-soft: light-dark(#fdece6, #3a1d12);
	--colour-on-primary: light-dark(#ffffff, #1a0a04);
	--colour-danger: light-dark(#c72a2a, #ff7a7a);
	--colour-danger-hover: light-dark(#ae2525, #ff9999);
	--colour-danger-soft: light-dark(#fdeaea, #3a1b1d);
	--colour-ok: light-dark(#157a4a, #4cc38a);
	--colour-ok-soft: light-dark(#e3f4ea, #15291f);
	--colour-warning: light-dark(#a15c00, #f2b54a);
	--colour-warning-soft: light-dark(#fff3dc, #33270f);
	--colour-info: light-dark(#1d64c4, #6aa5f5);
	--colour-info-soft: light-dark(#e7f0fc, #172539);
	--colour-neutral-soft: light-dark(#eef0f3, #1f232b);
	--colour-bg: light-dark(#f6f7f9, #101216);
	--colour-surface: light-dark(#ffffff, #171a20);
	--colour-border: light-dark(#e6e8ec, #242832);
	--colour-border-strong: light-dark(#8595a9, #5a6980);
	--colour-overlay: rgb(11 12 15 / 0.45);
	--colour-text: light-dark(#15171c, #eceef2);
	--colour-text-muted: light-dark(#5d6270, #9aa1ae);
	--colour-text-faint: light-dark(#969aa6, #6b7280);
	--colour-on-avatar: #ffffff;
	--avatar-saturation: 55%;
	--avatar-lightness: 30%;
	--colour-hover: light-dark(#f8f9fb, #1b1e25);
	--colour-card-header: light-dark(#ffffff, #171a20);
	--colour-header: light-dark(#ffffff, #101216);
	--colour-sidebar: light-dark(#121419, #0b0c0f);
	--colour-sidebar-text: light-dark(#9198a6, #8a91a0);
	--colour-sidebar-label: light-dark(#7e8594, #767d8b);
	--colour-sidebar-text-strong: light-dark(#f2f3f5, #f2f3f5);
	--colour-sidebar-hover: light-dark(#1c1f26, #161920);
	--colour-sidebar-active: light-dark(#252933, #1f232c);
	--colour-sidebar-active-text: light-dark(#ffffff, #ffffff);
	--colour-sidebar-primary: light-dark(#e2532d, #ff6a3d);
	--colour-on-sidebar-primary: light-dark(#1a0a04, #1a0a04);
	--radius-sm: 0.375rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-mark: 0.3125rem;
	--radius-tag: 0.3125rem;
	--shadow-sm: 0 0 0 1px var(--console-ring), 0 1px 3px var(--console-shadow);
	--shadow-md: 0 0 0 1px var(--console-ring), 0 1px 3px var(--console-shadow);
	--focus-ring-width: 2px;
	--font-sans: "Geist Variable", system-ui, sans-serif;
	--font-heading: "Geist Variable", system-ui, sans-serif;
	--font-figures: "Geist Variable", system-ui, sans-serif;
	--font-size-base: 13.5px;
	--font-size-small: 0.8125rem;
	--font-size-xs: 0.75rem;
	--font-size-title: 1.5rem;
	--font-size-section: 0.8125rem;
	--font-weight-heading: 600;
	--font-weight-section: 600;
	--font-tracking-heading: -0.02em;
	--font-tracking-section: -0.01em;
	--font-case-section: none;
	--font-weight-tag: 600;
	--font-tracking-tag: 0em;
	--font-case-tag: none;
	--space-page-x: 1.75rem;
	--space-page-y: 1.25rem;
	--space-page-x-narrow: 1.3125rem;
	--space-page-y-narrow: 1.5rem;
	--space-stack: 1rem;
	--space-card-x: 1rem;
	--space-card-y: 0.75rem;
	--space-row-y: 0.5rem;
	--size-sidebar: 13.75rem;
	--size-control: 2rem;
	--space-control-x: 1rem;
	--space-control-y: 0.3046875rem;
	--border-card: 0 solid transparent;
	--border-card-header: 1px solid var(--colour-border);
	--border-row: 1px solid var(--colour-border);
	--border-sidebar: 0;
	--border-header: 1px solid var(--colour-border);
	--border-tag: 0 solid currentColor;
}

[data-theme="console"] .sidebar-nav__link[aria-current="page"] {
	box-shadow: inset 2px 0 0 var(--colour-sidebar-primary);
}


[data-theme="console"] .badge--ok,
[data-theme="console"] .badge--problem,
[data-theme="console"] .badge--warning,
[data-theme="console"] .badge--info {
	gap: 0.375rem;
}

[data-theme="console"] .badge--ok::before,
[data-theme="console"] .badge--problem::before,
[data-theme="console"] .badge--warning::before,
[data-theme="console"] .badge--info::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: currentColor;
}