/*! Payara Pattern Library version: 0.78.1 */
/*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */

/* Reset */

	html {
		/* Normalise box-sizing. */
		box-sizing: border-box;

		/* Give everything a safe base font. */
		font-family: Helvetica, Arial, sans-serif;

		/* Resets the base font to 10px, this is an easier starting point for sizing 
		text with REMs. */
		font-size: 62.5%;
	}
	/* 1600 / 16px. We measure in EMs so that the scale of the text is taken 
	   into account. */
	@media only screen and (min-width: 100em) {
		html {
			font-size: 70.3125%;
		}
	}
	@media screen and (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}
	/* Normalise box-sizing, part 2. Inheritance makes the rare occurance when 
		content-box might be used not be overridden with border-box. */
	*, *:before, *:after {
		box-sizing: inherit;
	}
	/* Fixes an issue where open details elements default to content-box, 
		which then breaks sizing on icons and form elements. See CLOUD-2138. */
	details[open] > *, details[open] > *:before, details[open] > *:after {
		box-sizing: border-box;
	}
	img {
		display: block;
		max-width: 100%;
		height: auto;
		border: none;
	}
	/* Since we always style these we don't need to test for the existence of 
	   classes. */
	body, 
	h1, h2, h3, h4, h5, h6,
	p, ul, ol,
	dl, dt, dd,
	blockquote, cite {
		font-weight: normal;
		font-size: 1em;
		font-style: normal;
		margin: 0;
		padding: 0;
	}
	ul, ol {
		list-style-type: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
		border: none;
	}
	th {
		font-weight: normal;
	}
	pre {
		font-size: 2ex;	
		margin: 0;
		tab-size: 4;
	}
	code {
		font-size: 2ex;
	}

	/* For safety only reset buttons that have a class attached. */
	/* For v1: change to button */
	button[class] {
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	input, 
	textarea,
	select {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		outline: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	/* This is hacky and we shouldn't be showing desfault checkboxes but whilst we are... */
	/* For v1: remove this */
	input[type=checkbox] {
		appearance: auto;
		-webkit-appearance: checkbox;
	}

	fieldset {
		border: 0;
		padding: 0;
	}
	legend {
		padding: 0;
	}



/* Colours */

	:root {
		/* Primary Payara Colours. */
		--tango: 240,152,27;
		--midnight: 0,44,62;
		--snow: 255,255,255;

		/* Secondary Payara Colours. */
		--smurf: 0,124,194;
		--basalt: 50,68,74;
		--concrete: 218,224,226;

		/* Statuses, can be paired with white text to comply with AA a11y. */
		/* --cherry: 155,18,0;		Error */
		--cherry: 219,26,0;		/* Error */
		--frog: 0,103,41;		/* Success */

		/* --cherry-on-dark: 255,150,130; */
		/* --cherry-on-dark: 255,86,65;	This should not be used for text colour, more for edge cases like error borders on form fields. */
		/* --frog-on-dark:  */

		/* Used for dark mode, shadows, etc. */
		--coal: 23,24,24;		/* Primarily used for dark mode background. */
		--jet: 15,15,15;
		--onyx: 11,11,11;		/* Header and button text. */

		--marmalade: 244,74,2;
		--gecko: 98,196,0;
		--plum: 170,0,250;
		--candy: 255,66,180;
		--mud: 152,73,0;
		--slate: 152,147,138;
		--ortolan: 0,53,241;
	}


	.color--marmalade {
		color: rgb(var(--marmalade)) !important;
	}
	.color-bk--marmalade {
		background: rgb(var(--marmalade)) !important;
	}
	.color-fill--marmalade {
		fill: rgb(var(--marmalade)) !important;
	}


	.color--gecko {
		color: rgb(var(--gecko)) !important;
	}
	.color-bk--gecko {
		background: rgb(var(--gecko)) !important;
	}
	.color-fill--gecko {
		fill: rgb(var(--gecko)) !important;
	}


	.color--plum {
		color: rgb(var(--plum)) !important;
	}
	.color-bk--plum {
		background: rgb(var(--plum)) !important;
	}
	.color-fill--plum {
		fill: rgb(var(--plum)) !important;
	}


	.color--candy {
		color: rgb(var(--candy)) !important;
	}
	.color-bk--candy {
		background: rgb(var(--candy)) !important;
	}
	.color-fill--candy {
		fill: rgb(var(--candy)) !important;
	}


	.color--mud {
		color: rgb(var(--mud)) !important;
	}
	.color-bk--mud {
		background: rgb(var(--mud)) !important;
	}
	.color-fill--mud {
		fill: rgb(var(--mud)) !important;
	}


	.color--slate {
		color: rgb(var(--slate)) !important;
	}
	.color-bk--slate {
		background: rgb(var(--slate)) !important;
	}
	.color-fill--slate {
		fill: rgb(var(--slate)) !important;
	}


	.color--ortolan {
		color: rgb(var(--ortolan)) !important;
	}
	.color-bk--ortolan {
		background: rgb(var(--ortolan)) !important;
	}
	.color-fill--ortolan {
		fill: rgb(var(--ortolan)) !important;
	}


	.color--tango {
		color: rgb(var(--tango)) !important;
	}
	.color-bk--tango {
		background: rgb(var(--tango)) !important;
	}
	.color-fill--tango {
		fill: rgb(var(--tango)) !important;
	}

	.color--midnight {
		color: rgb(var(--midnight)) !important;
	}
	.color-bk--midnight {
		background: rgb(var(--midnight)) !important;
	}
	.color-fill--midnight {
		fill: rgb(var(--midnight)) !important;
	}

	.color--snow {
		color: rgb(var(--snow)) !important;
	}
	.color-bk--snow {
		background: rgb(var(--snow)) !important;
	}
	.color-fill--snow {
		fill: rgb(var(--snow)) !important;
	}

	.color--smurf {
		color: rgb(var(--smurf)) !important;
	}
	.color-bk--smurf {
		background: rgb(var(--smurf)) !important;
	}
	.color-fill--smurf {
		fill: rgb(var(--smurf)) !important;
	}

	.color--cherry {
		color: rgb(var(--cherry)) !important;
	}
	.color-bk--cherry {
		background: rgb(var(--cherry)) !important;
	}
	.color-fill--cherry {
		fill: rgb(var(--cherry)) !important;
	}

	.color--frog {
		color: rgb(var(--frog)) !important;
	}
	.color-bk--frog {
		background: rgb(var(--frog)) !important;
	}
	.color-fill--frog {
		fill: rgb(var(--frog)) !important;
	}


	
/* Fonts */

	/* Normal */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: normal;
		font-weight: 400;
		/* Uses the visitor's locally installed copy if available. */
		src: local('IBM Plex Sans'), local('IBMPlexSans'),
			/* Super Modern Browsers */
			url('../fonts/ibm-plex-sans-v2-latin-regular.woff2') format('woff2'), 
			/* Modern Browsers */
			url('../fonts/ibm-plex-sans-v2-latin-regular.woff') format('woff');
		font-display: swap;
	}

	/* Normal Italic */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: italic;
		font-weight: 400;
		src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
			url('../fonts/ibm-plex-sans-v2-latin-italic.woff2') format('woff2'),
			url('../fonts/ibm-plex-sans-v2-latin-italic.woff') format('woff');
		font-display: swap;
	}
	
	/* Bold */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: normal;
		font-weight: 700;
		src: local('IBM Plex Sans Bold'), local('IBMPlexSans-Bold'),
			url('../fonts/ibm-plex-sans-v2-latin-700.woff2') format('woff2'),
			url('../fonts/ibm-plex-sans-v2-latin-700.woff') format('woff');
		font-display: swap;
	}

	/* Bold Italic */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: italic;
		font-weight: 700;
		src: local('IBM Plex Sans Bold Italic'), local('IBMPlexSans-BoldItalic'),
			url('../fonts/ibm-plex-sans-v2-latin-700italic.woff2') format('woff2'),
			url('../fonts/ibm-plex-sans-v2-latin-700italic.woff') format('woff');
		font-display: swap;
	}

	/* Semi-bold */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: normal;
		font-weight: 500;
		src: local('IBM Plex Sans Medium'), local('IBMPlexSans-Medium'),
			url('../fonts/ibm-plex-sans-v2-latin-500.woff2') format('woff2'),
			url('../fonts/ibm-plex-sans-v2-latin-500.woff') format('woff');
		font-display: swap;
	}

	/* Semi-bold Italic */
	@font-face {
		font-family: 'IBM Plex Sans';
		font-style: italic;
		font-weight: 500;
		src: local('IBM Plex Sans Medium Italic'), local('IBMPlexSans-MediumItalic'),
			url('../fonts/ibm-plex-sans-v2-latin-500italic.woff2') format('woff2'),
			url('../fonts/ibm-plex-sans-v2-latin-500italic.woff') format('woff');
		font-display: swap;
	}

	body {
		font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
		font-size: 1.6rem;

		/* We don't put a unit type here as this way the browser keeps it as a 
		   multiple of the text size. */
		line-height: 1.5;
	}



/* Paragraph */

	p:not([class]), .p {
		margin-bottom: 1.6rem;
	}
	p:not([class]):last-child, .p:last-child {
		margin-bottom: 0;
	}


	
/* Titles */

	/* We apply the styling to either H elements that have no explicit styling 
	   added or where a specific style is needed, never to both. This is so we can 
	   make an H2 look like an H1 wehilst keeping the correct document structure. */
	h1:not([class]), .h1 {
		font-size: 3.2rem;
		font-weight: 700;
		margin-bottom: 1.6rem;
		margin-top: 3.2rem;
		text-wrap: balance;
	}
	h2:not([class]), .h2 {
		font-size: 2.6rem;
		font-weight: 700;
		margin-bottom: 1.6rem;
		margin-top: 3.2rem;
		text-wrap: balance;
	}
	h3:not([class]), .h3 {
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 1.6rem;
		margin-top: 3.2rem;
		text-wrap: balance;
	}
	h4:not([class]), .h4 {
		font-size: 1.6rem;
		font-weight: 700;
		margin-bottom: 1.6rem;
		margin-top: 2.4rem;
		text-wrap: balance;
	}
	h5:not([class]), .h5 {
		font-size: 1.6rem;
		font-weight: 700;
		text-wrap: balance;
	} 
	h6:not([class]), .h6 {
		font-size: 1.6rem;
		font-weight: 700;
		text-wrap: balance;
	}

	/* Squish the excessive margins when titles are placed next to each other. */
	h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
	h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6,
	h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6,
	h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6,
	h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6,
	h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6, 
	:not(.cards) > h1:first-child,
	:not(.cards) > h2:first-child,
	:not(.cards) > h3:first-child,
	:not(.cards) > h4:first-child,
	:not(.cards) > h5:first-child,
	:not(.cards) > h6:first-child,
	/* Sometimes a form will inject a hidden field and ruin the :first-child selector. */
	:not(.cards) > input[type="hidden"] + h1,
	:not(.cards) > input[type="hidden"] + h2,
	:not(.cards) > input[type="hidden"] + h3,
	:not(.cards) > input[type="hidden"] + h4,
	:not(.cards) > input[type="hidden"] + h5,
	:not(.cards) > input[type="hidden"] + h6,
	/* If we want a hidden from the DOM class this should be compatible as long as it's name ends in 'hidden'. */
	:not(.cards) > [class$="hidden"] + h1, 
	:not(.cards) > [class$="hidden"] + h2, 
	:not(.cards) > [class$="hidden"] + h3, 
	:not(.cards) > [class$="hidden"] + h4, 
	:not(.cards) > [class$="hidden"] + h5, 
	:not(.cards) > [class$="hidden"] + h6, 
	/* Squish the excessive margins when titles are placed next to each other. */
	.h1 + .h1, .h1 + .h2, .h1 + .h3, .h1 + .h4, .h1 + .h5, .h1 + .h6,
	.h2 + .h1, .h2 + .h2, .h2 + .h3, .h2 + .h4, .h2 + .h5, .h2 + .h6,
	.h3 + .h1, .h3 + .h2, .h3 + .h3, .h3 + .h4, .h3 + .h5, .h3 + .h6,
	.h4 + .h1, .h4 + .h2, .h4 + .h3, .h4 + .h4, .h4 + .h5, .h4 + .h6,
	.h5 + .h1, .h5 + .h2, .h5 + .h3, .h5 + .h4, .h5 + .h5, .h5 + .h6,
	.h6 + .h1, .h6 + .h2, .h6 + .h3, .h6 + .h4, .h6 + .h5, .h6 + .h6, 
	:not(.cards) > .h1:first-child,
	:not(.cards) > .h2:first-child,
	:not(.cards) > .h3:first-child,
	:not(.cards) > .h4:first-child,
	:not(.cards) > .h5:first-child,
	:not(.cards) > .h6:first-child,
	/* Sometimes a form will inject a hidden field and ruin the :first-child selector. */
	:not(.cards) > input[type="hidden"] + .h1,
	:not(.cards) > input[type="hidden"] + .h2,
	:not(.cards) > input[type="hidden"] + .h3,
	:not(.cards) > input[type="hidden"] + .h4,
	:not(.cards) > input[type="hidden"] + .h5,
	:not(.cards) > input[type="hidden"] + .h6,
	/* If we want a hidden from the DOM class this should be compatible as long as it's name ends in 'hidden'. */
	:not(.cards) > [class$="hidden"] + .h1, 
	:not(.cards) > [class$="hidden"] + .h2, 
	:not(.cards) > [class$="hidden"] + .h3, 
	:not(.cards) > [class$="hidden"] + .h4, 
	:not(.cards) > [class$="hidden"] + .h5, 
	:not(.cards) > [class$="hidden"] + .h6 {
		margin-top: 0 !important;
	}
	h1:last-child,
	h2:last-child,
	h3:last-child,
	h4:last-child,
	h5:last-child,
	h6:last-child, 
	.h1:last-child,
	.h2:last-child,
	.h3:last-child,
	.h4:last-child,
	.h5:last-child,
	.h6:last-child {
		margin-bottom: 0 !important;
	}

	/* Sometimes the full spacing is too much so provide an option for half spacing. */
	.h1.half-space, .h2.half-space, .h3.half-space, .h4.half-space {
		margin-bottom: 0.8rem;
	}



/* Unordered List */

	ul:not([class]) {
		list-style-type: disc;
		margin-bottom: 1.6rem;
		margin-left: 4.8rem;
	}
	ul:not([class]):last-child {
		margin-bottom: 0;
	}

	.ul--no-indent {
		list-style-type: disc;
		margin-bottom: 1.6rem;
		/* margin-left: 4.8rem; */
	}
	.ul--no-indent:last-child {
		margin-bottom: 0;
	}

	.ul--half-indent {
		list-style-type: disc;
		margin-bottom: 1.6rem;
		margin-left: 1.6rem;
	}
	.ul--half-indent:last-child {
		margin-bottom: 0;
	}


	
/* Ordered List */

	ol:not([class]) {
		list-style-type: decimal;
		margin-bottom: 1.6rem;
		margin-left: 4.8rem;
	}
	ol:not([class]):last-child {
		margin-bottom: 0;
	}

	.ol--half-indent {
		list-style-type: decimal;
		margin-bottom: 1.6rem;
		margin-left: 1.6rem;
	}
	.ol--half-indent:last-child {
		margin-bottom: 0;
	}


	
/* Definition List */

	dl:not([class]) {
		margin-bottom: 1.6rem;
	}
	dl:not([class]):last-child {
		margin-bottom: 0;
	}
		dl:not([class]) dt {
			font-weight: 700;
		}

	.dl--long-form {
		margin-bottom: 1.6rem;
	}
	.dl--long-form:last-child {
		margin-bottom: 0;
	}
		.dl--long-form dt {
			font-weight: 700;
		}
		.dl--long-form dt:not(:first-of-type) {
			margin-top: 1.6rem;
		}

	/* Horizontal DL */
	.dl--horizontal {
		margin-bottom: 1.6rem;
	}
	.dl--horizontal:last-child {
		margin-bottom: 0;
	}
		.dl--horizontal > * {
			display: inline;
		}
		.dl--horizontal dt {
			font-weight: 700;
		}
		.dl--horizontal > dd:not(:last-child) {
			margin-right: 1.6rem;
		}

	.dl--container {
		container-type: inline-size;
		container-name: dl;
	}
	@container dl (max-width: 60rem) {
		.dl--horizontal > dd:not(:last-child) {
			margin-right: 0;
		}
		.dl--horizontal dd::after {
			content: "";
			display: block;
		}
	}

	/* Grid DL */
	.dl--grid {
		margin-bottom: 1.6rem;
	}
	.dl--grid:last-child {
		margin-bottom: 0;
	}
		.dl--grid dt {
			clear: left;
			float: left;
			font-weight: 700;
			margin-right: 1.6rem;
		}
		.dl--grid dd {
			float: left;
		}
	@supports (display: grid) {
		.dl--grid {
			display: grid;
			grid-template-columns: fit-content(50%) 1fr;
		}
	}

	@container dl (max-width: 40rem) {
		.dl--horizontal > * {
			display: block;
		}
		.dl--grid {
			display: block;
		}
			.dl--grid dt {
				float: none;
				margin-right: 0;
			}
			.dl--grid dd {
				float: none;
			}
	}



/* Icon list */

	.icon-list {
		list-style-type: none;
		margin-bottom: 1.6rem;
		/* margin-left: 2.8rem; */
		padding-left: 2rem;
	}
	.icon-list:last-child {
		margin-bottom: 0;
	}
		.icon-list li {
			position: relative;
		}
			.icon-list .icon {
				position: absolute;
				right: calc(100% + 0.4rem);
				top: 0.4rem;
			}
			.icon-list .icon--tick {
				fill: rgb(var(--frog));
			}



/* Large text */

	.text--large {
		font-size: 2em;
	}

	p.text--large {
		margin-bottom: 1.6rem;
	}
	p.text--large:last-child {
		margin-bottom: 0;
	}



/* Pre */

	pre:not([class]) {
		margin-bottom: 1.6rem;
	}
	pre:not([class]):last-child {
		margin-bottom: 0;
	}


	
/* Small text */

	small {
		font-size: 1.4rem;
	}
	small.block {
		display: block;
		margin: 0;
	}



/* Accessible way to hide content whilst keeping it available to screen readers. */

	.visually-hidden:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(100%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}


	
/* Hide content even from screen readers. */

	.dom-hidden {
		display: none !important;
	}


	
/* Page Scrollbar */

	/* This stops the default scroll chaining, if we have a scrollable area inside another scrollable area we don't want the user to scroll the outer one when over the inner one. */
	/* 800px ish. */
	@media only screen and (min-width: 50em) {
		*:not(:has(> pre)) {
			overscroll-behavior: contain;
		}
	}
	pre {
		overscroll-behavior: auto;
	}

	/* Firefox and Chrome. */
	@supports (scrollbar-width: auto) {
		* {
			/* CurrentColor can't be used as a value to then set an opacity on in the stand way, e.g. rgb(currentColor, 0.8);, it can be used in color-mix(), mixing it with transparent effectively means we can use a tint of currentClolr. Below we're setting the thumb and track. */
			scrollbar-color: color-mix(in srgb, currentColor 75%, transparent) color-mix(in srgb, currentColor 15%, transparent);

			/* Ok, a rant: If the OS is set to "Always show scrolbars: Off" then we need this value set to auto because thin is just way too thin. If the user switched to On then this will be quite wide, there is no fix for this since the setting is OS level and not exposed to the browser, so make a guess that if the user cares about seeing scrollbars then they don't have a problem with wider ones. */
			scrollbar-width: auto;
		}

		/* Chromium (not Safari) on Mac and Windows. */
		/* The space between "not (" is critical, this will not be applied to Windows Chrome without it. We have to set Chrome scrollbar width to the narrower setting as "auto" isn't consistent visually with every other browser. */
		@supports (not (-moz-appearance: none)) {
			* {
				scrollbar-width: thin;
			}
		}
	}

	/* Safari. */
	::-webkit-scrollbar {
		height: 10px;
		width: 10px;
	}
	::-webkit-scrollbar-thumb {
		background: currentColor;
		opacity: 0.4;
		border-radius: 10px;
	}
	::-webkit-scrollbar-track {
		background: currentColor;
		opacity: 0.15;
	}



	.js__scroll {
		display: block;
	}

	/* To get the shadows to display over the content we have to apply the shadows to elements. */
	.js__scroll[data-shadow_top="1"]:before, 
	.js__scroll[data-shadow_bottom="1"] > .js__shadow {
		display: block;
		width: 100%;
		height: 1em;
		margin-top: -1em;
		position: sticky;
	}
	.js__scroll[data-shadow_top="1"]:before {
		content: '';
		top: 0;
		box-shadow: 
			0 1em 1em -1em rgba(var(--onyx), 0.25) inset,
			0 1em 0.5em -1em rgba(var(--onyx), 0.25) inset,
			0 1em 0.25em -1em rgba(var(--onyx), 0.25) inset;
		z-index: 110;
	}
	.js__scroll[data-shadow_bottom="1"] > .js__shadow {
		top: calc(100% - 1em);
		box-shadow: 
			0 -1em 1em -1em rgba(var(--onyx), 0.25) inset,
			0 -1em 0.5em -1em rgba(var(--onyx), 0.25) inset,
			0 -1em 0.25em -1em rgba(var(--onyx), 0.25) inset;
		z-index: 111;
	}


	/* Fixes issue where we are applying padding to the same element we want to scroll, not ideal and don't do it moving forward. */
	.sidebar__content.js__scroll[data-shadow_top="1"]:before,
	.sidebar__content.js__scroll[data-shadow_bottom="1"] > .js__shadow {
		margin-left: calc(-1 * var(--padding));
		margin-right: calc(-1 * var(--padding));
		width: calc(100% + (var(--padding)*2));
	}


	.scroll {
		overflow: auto;
	}
	/* Prevents the PRE from stretching the page layout to it's fullest width. */
	.scroll pre {
		width: 0;
	}
	


/* Text alignment */

	/* We give this some extra specifity to override the default 
       left alignment on elements, eg tables. */
	.page .text-align--left {
		text-align: left;
	}
	.page .text-align--center {
		text-align: center;
	}
	.page .text-align--right {
		text-align: right;
	}

	.table tr.text-align--left :where(th, td) {
		text-align: left;
	}
	.table tr.text-align--center :where(th, td) {
		text-align: center;
	}
	.table tr.text-align--right :where(th, td) {
		text-align: right;
	}


	
/* No wrapping */

	.no-wrap {
		white-space: nowrap;
	}
	@media only screen and (max-width: 30em) {
		.no-wrap {
			white-space: normal;
		}
	}


	
/* Gutters */

	:root {

		/* Corner radiuses for buttons and block level elements. */
		--button-radius: 0.3rem;
		--block-radius: 0.3rem;

		/* Gutter is the spacing between blocks, there is a choice of three sizes, 
		   the one chosen should be assigned to --gutter. */
		--gutter-tight: 0.8rem;
		--gutter-medium: 1.6rem;
		--gutter-loose: 3.2rem;
		--gutter: var(--gutter-medium);
	}

	/* 
		Apply these to space out blocks. This is more flexible than adding the 
		spacing to each element. 
		The individual gutter classes set the specific margins so as not to override 
		any block specific spacing there might be on any given block.
	*/
	.gutter {
		margin: var(--gutter);
	}
	/* Top and bottom. */
	.gutter--v {
		margin-top: var(--gutter);
		margin-bottom: var(--gutter);
	}
	/* Left and right. */
	.gutter--h {
		margin-left: var(--gutter);
		margin-right: var(--gutter);
	}
	/* Left. */
	.gutter--l {
		margin-left: var(--gutter);
	}
	/* Right. */
	.gutter--r {
		margin-right: var(--gutter);
	}
	/* Top. */
	.gutter--t {
		margin-top: var(--gutter);
	}
	/* Bottom. */
	.gutter--b {
		margin-bottom: var(--gutter);
	}

	.gutter--v--double {
		margin-bottom: calc(var(--gutter) * 2);
		margin-top: calc(var(--gutter) * 2);
	}
	.gutter--t--double {
		margin-top: calc(var(--gutter) * 2);
	}
	.gutter--b--double {
		margin-bottom: calc(var(--gutter) * 2);
	}


	
/* Padding */

	:root {
		/* Padding is the space inside each block element, there is a choice of 
		   three sizes, the one chosen should be assigned to --padding. */
		--padding-tight: 1.2rem;
		--padding-medium: 1.6rem;
		--padding-loose: 2rem;
		--padding: var(--padding-medium);
	}

	.padding {
		padding: var(--padding);
	}
	.padding--v {
		padding-top: var(--padding);
		padding-bottom: var(--padding);
	}
	.padding--h {
		padding-left: var(--padding);
		padding-right: var(--padding);
	}
	.padding--l {
		padding-left: var(--padding);
	}
	.padding--r {
		padding-right: var(--padding);
	}
	.padding--t {
		padding-top: var(--padding);
	}
	.padding--b {
		padding-bottom: var(--padding);
	}
/* Cards */

	/* Cards will be split into equal widths by default. Individual cards can be 
	   overridden by using the 11 column-based width classes below. The total card 
	   container width is divied in 12 as this number is more flexible to deal with 
	   for multiple cards. */

	:root {
		--card-background-opacity: 1;
		--card-listing-border: rgba(var(--basalt), 0.25);
		--card-calout-grey-bk: rgb(var(--basalt));
	}
	.theme--light {
		--card-background-opacity: 1;
		--card-listing-border: rgba(var(--basalt), 0.25);
		--card-calout-grey-bk: rgba(var(--basalt), 0.25);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--card-background-opacity: 0.05;
			--card-listing-border: rgba(255,255,255, 0.15);
			--card-calout-grey-bk: rgba(var(--concrete), 0.3);
		}
	}
	.theme--dark {
		--card-background-opacity: 0.05;
		--card-listing-border: rgba(255,255,255, 0.15);
		--card-calout-grey-bk: rgba(var(--concrete), 0.3);
	}

	.cards {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: stretch;
		gap: var(--gutter);
		margin: var(--gutter);
	}
	.cards--vertical {
		flex-flow: column;
	}
	.cards .cards {
		margin: 0;
	}

		/* VERSION 1.0.0: This line is kept in purely for backwards compatibility, when we bump the major version number it can go. */
		.cards > *, 
		.cards > .card {
			/* IE11 fallback. */
			flex: 1 0 6rem;
			/* This fits a single icon-only button plus padding, realistically 
			   nothing should actually be this small. */
			flex: 1 0 calc(4rem + calc(var(--padding) * 2));
		}
		.cards > *, 
		.cards > .card,
		/* Nested cards by default do not add the card background or padding, this is to try and discourage "everything in a box" design, we can add these back in by using this card--bk class. */
		.cards .cards.card--bk > .card, 
		.cards .cards .card.card--bk {
			background: rgba(255,255,255, var(--card-background-opacity));
			border-radius: var(--block-radius);
			padding: var(--padding);
		}

		/* Nested cards shouldn't use the background by default. .card--no-pad can 
		   be applied to individual cards or the whole group to target all cards. */

		 /* VERSION 1.0.0: remove generic line targeting no-class. */
		.cards .cards > *,
		.cards .cards > .card,
		.card--no-pad,
		.card.card--no-pad {
			background: none;
			padding: 0;
		}
		/* As we already have padding on the header and footer we don't want the outmost card group to have spacing. */
		.page__header .card--no-pad, 
		.page__footer .card--no-pad {
			margin: 0;
		}
		.cards.card--no-pad > * {
			background: none;
			margin: 0;
			padding: 0;
		}
		/* For if we want to use the card layout without the backgrounds. */
		.card--no-bk,
		.card.card--no-bk,
		.cards.card--no-bk > * {
			background: none;
		}
		
		.card.card--stretch-block {
			display: flex;
		}
			.card.card--stretch-block > * {
				flex: 1 0 auto;
			}

		/* 
			12 column-based width classes
			
			The total card group width is divided into 12. So, a card of 50% would 
			be .card--width-6. Because IE11 doesn't support calc inside flex 
			declarations we take a rough stab at an approximation, I don't bother 
			the the decimal places because these values aren't taking into account 
			the gutter widths anyway so ¯\_(ツ)_/¯. Best practice is to always leave 
			the larger card unspecific in its width, that way IE11 has something to 
			eat into and proper browsers will get it right anyway.
		 */

		/* Individual card widths. */
		.card--width-1, 
		.card.card--width-1 {
			/* This is for IE11, it doesn't support calc in flex so we need to approximate it. */
			flex: 0 1 8%;
			/* Sane browsers do this. */
			flex: 0 1 calc(calc(100% / 12) - var(--gutter));
		}
		.card--width-2, 
		.card.card--width-2 {
			flex: 0 1 16%;
			flex: 0 1 calc((calc(100% / 12) * 2) - var(--gutter));
		}
		.card--width-3, 
		.card.card--width-3 {
			flex: 0 1 25%;
			flex: 0 1 calc((calc(100% / 12) * 3) - var(--gutter));
		}
		.card--width-4, 
		.card.card--width-4 {
			flex: 0 1 33%;
			flex: 0 1 calc((calc(100% / 12) * 4) - var(--gutter));
		}
		.card--width-5, 
		.card.card--width-5 {
			flex: 0 1 41%;
			flex: 0 1 calc((calc(100% / 12) * 5) - var(--gutter));
		}
		.card--width-6, 
		.card.card--width-6 {
			flex: 0 1 50%;
			flex: 0 1 calc((calc(100% / 12) * 6) - var(--gutter));
		}
		.card--width-7, 
		.card.card--width-7 {
			flex: 0 1 58%;
			flex: 0 1 calc((calc(100% / 12) * 7) - var(--gutter));
		}
		.card--width-8, 
		.card.card--width-8 {
			flex: 0 1 66%;
			flex: 0 1 calc((calc(100% / 12) * 8) - var(--gutter));
		}
		.card--width-9, 
		.card.card--width-9 {
			flex: 0 1 75%;
			flex: 0 1 calc((calc(100% / 12) * 9) - var(--gutter));
		}
		.card--width-10, 
		.card.card--width-10 {
			flex: 0 1 83%;
			flex: 0 1 calc((calc(100% / 12) * 10) - var(--gutter));
		}
		.card--width-11, 
		.card.card--width-11 {
			flex: 0 1 91%;
			flex: 0 1 calc((calc(100% / 12) * 11) - var(--gutter));
		}
		.card--width-12, 
		.card.card--width-12 {
			flex: 0 1 100%;
			flex: 0 1 100% - var(--gutter);
		}

		/* Set a card to not allow its contents to wrap, use with caution. Not documented in the Blinky GUI docs as this is extremely dangerous in the wrong hands. */
		.card--no-wrap {
			white-space: nowrap;
		}

		/* Enforce some minimum widths on cards, they will wrap unless they can be 
		   at least this wide in their row. */
		.card--min-width-100, 
		.card.card--min-width-100, 
		.cards.card--min-width-100 > *, 
		.cards.card--min-width-100 > .card {
			flex: 1 1 100rem;
		}
		.card--min-width-90, 
		.card.card--min-width-90, 
		.cards.card--min-width-90 > *, 
		.cards.card--min-width-90 > .card {
			flex: 1 1 90rem;
		}
		.card--min-width-80, 
		.card.card--min-width-80, 
		.cards.card--min-width-80 > *, 
		.cards.card--min-width-80 > .card {
			flex: 1 1 80rem;
		}
		.card--min-width-70, 
		.card.card--min-width-70, 
		.cards.card--min-width-70 > *, 
		.cards.card--min-width-70 > .card {
			flex: 1 1 70rem;
		}
		.card--min-width-60, 
		.card.card--min-width-60, 
		.cards.card--min-width-60 > *, 
		.cards.card--min-width-60 > .card, 
		.cards.cards--min-width-large > *, 
		.cards.cards--min-width-large > .card {
			flex: 1 1 60rem;
		}
		.card--min-width-50, 
		.card.card--min-width-50, 
		.cards.card--min-width-50 > *, 
		.cards.card--min-width-50 > .card, 
		.cards.cards--min-width-lardium > *, 
		.cards.cards--min-width-lardium > .card {
			flex: 1 1 50rem;
		}
		.card--min-width-40, 
		.card.card--min-width-40, 
		.cards.card--min-width-40 > *, 
		.cards.card--min-width-40 > .card {
			flex: 1 1 40rem;
		}
		.card--min-width-30, 
		.card.card--min-width-30, 
		.cards.card--min-width-30 > *, 
		.cards.card--min-width-30 > .card, 
		.cards.cards--min-width-medium > *, 
		.cards.cards--min-width-medium > .card {
			flex: 1 1 30rem;
		}
		.card--min-width-20, 
		.card.card--min-width-20, 
		.cards.card--min-width-20 > *, 
		.cards.card--min-width-20 > .card, 
		.cards.cards--min-width-small > *, 
		.cards.cards--min-width-small > .card {
			flex: 1 1 20rem;
		}

		/* TODO: where is this being used? */
		.cards--min-width-medium:not(.cards) {
			flex: 1 1 200px;
		}


		/* Sets a maximum width on the card container, if the available screen size exceeds this amount the extra space is distributed evenly on the left and right margins. */

		/* .cards--max-width {
			margin: auto;
		} */
		/* Not sure this is needed. */
		/* .cards--max-width > .cards {
			margin-left: calc((var(--gutter)/ 2) - var(--gutter));
			margin-right: calc((var(--gutter)/ 2) - var(--gutter));
		} */
		.cards--max-width--small {
			margin: auto;
			max-width: 45rem;
		}
		.cards--max-width--medium {
			margin: auto;
			max-width: 65rem;
		}
		.cards--max-width--large {
			margin: auto;
			max-width: 130rem;
		}



		/* If we want to limit a flex item to be only its own content width, think a card block containing a title and a menu. */
		.card--content-width, 
		.card.card--content-width {
			flex: 0 0 auto;
		}

		/* VERSION 1.0.0: remove this line. */
		.cards--listing > *, 
		.cards--listing > .card {
			background: none;
			border: solid 1px var(--card-listing-border);
			padding: var(--padding);
		}
		/* VERSION 1.0.0: remove this line. */
		.cards .cards--listing > *, 
		.cards .cards--listing > .card {
			padding: var(--padding);
		}
	


	.cards > .card.card--callout--tango,
	.cards > .card.card-bk--tango {
		background: rgb(var(--tango)) !important;
		color: rgb(var(--basalt)) !important;
		padding: var(--padding);
	}
	.cards > .card.card--callout--blue,
	.cards > .card.card--callout--smurf,
	.cards > .card.card-bk--smurf {
		background: rgb(var(--smurf)) !important;
		color: rgb(255,255,255) !important;
		padding: var(--padding);
	}
	.cards > .card.card--callout--grey,
	.cards > .card.card-bk--grey {
		background: var(--card-calout-grey-bk) !important;
		padding: var(--padding) !important;
	}
	.cards > .card.card--callout--default,
	.cards > .card.card-bk {
		background: rgba(255,255,255, var(--card-background-opacity)) !important;
		padding: var(--padding) !important;
	}



/* Maximum widths for containers. */

	.max-width {
		max-width: 60rem;
	}



/* Page Structure */

	:root {
		/* 50% Concrete, we need to be specific because this is used in horizontal menu hovers and if it's translucent it won't work proper. */
		--page-background: rgb(236,239,240);
		--page-text: var(--basalt);

		--sidebar-background: rgb(var(--midnight));
		--sidebar-text: rgb(255,255,255);

		--header-text: rgb(255,255,255);
	}
	.theme--light {
		--page-background: rgb(236,239,240);
		--page-text: var(--basalt);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--page-background: rgb(var(--coal));
			--page-text: 255,255,255;
		}
	}
	.theme--dark {
		--page-background: rgb(var(--coal));
		--page-text: 255,255,255;
	}


	html {
		color: rgb(var(--page-text));
	}
	html:has(.theme--light) {
		color: rgb(var(--basalt));
	}
	html:has(.theme--dark) {
		color: rgb(255,255,255);
	}
	
	.page {
		background: var(--page-background);
		color: rgb(var(--page-text));
	}
		.page__header {
			background: rgb(var(--onyx));
			color: var(--header-text);
			padding: var(--padding);
		}
			.page__sidebar {
				align-self: stretch;
				background: var(--sidebar-background);
				color: var(--sidebar-text);
				display: flex;
			}
		.page__footer {
			background: rgb(var(--onyx));
			color: rgba(255,255,255, 0.75);
			padding: var(--padding);
			text-align: center;
		}



	@media only screen and (min-width: 60rem) {
		.page {
			/* Lock the footer to the window bottom if the content doesn't require scrolling. */
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}
			.page__header {
				flex: 1 0 auto;
			}
			.page__main {
				/* Flex to display sidebar and main content blocks. */
				display: flex;
				flex: 999 0 auto;
			}
			.page__main {
				flex-direction: row;
			}
				.page__sidebar {
					flex: 1 0 15em;
				}
				.page__sidebar.page__sidebar--wider {
					flex: 1 0 20em;
				}
				.page__content {
					flex: 999 0 0;
					/* This fixes IE11's inability to flex-wrap contents. */
					width: 100%;
				}
					.page__content-inner {
						margin-bottom: var(--gutter);
					}

			.page__footer {
				flex: 1 0 auto;
			}



		.page--sticky {
			height: 100vh;
			overflow: hidden;
		}
			.page--sticky .page__content {
				display: flex;
				flex-direction: column;
			}
				.page--sticky .page__content-inner {
					flex: 999 0 auto;
					height: 0;
					overflow-y: auto;
					margin-bottom: calc(var(--gutter) / 2);
				}
	}
		


	.page--sticky-header .page__header {
		position: sticky;
		top: 0;
		z-index: 210;
	}



	@media only screen and (max-width: calc(60rem - 1px) ) {
		.page__content-inner {
			margin-bottom: var(--gutter);
		}
	}



/* Header */

	.page__header .logo {
		display: block;
		width: 12rem;
	}
	.js__main-menu--wrapped.js__main-menu {
		justify-content: center;
	}


	
/* Sidebar */

	/* If the WC doesn't run then we want a basic non-JS powered element with column layout. */
	/* At some point we can updte and use this when browser support permits: .page__sidebar:not(:has(.sidebar)) */
	.page__sidebar:not(.js__sidebar) {
		flex-direction: column;
	}


	/* SIDEBAR STRUCTURE - menu open */

	.sidebar {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
		.sidebar__header,
		.sidebar__footer {
			flex: 0 0 auto;
			padding: var(--padding);
		}
		.sidebar__footer {
			display: flex;
			flex-flow: row wrap;
			justify-content: stretch;
			width: 100%;
		}
		.sidebar__content {
			min-height: 4em;
			overflow-y: auto;
			flex: 1 1 auto;
			height: 0;
			padding: 0 var(--padding);
		}

	.page__sidebar .menu {
		margin: 0 calc(-1 * var(--padding));
		width: calc(100% + (var(--padding)*2));
	}
	.page__sidebar .sidebar__footer .menu {
		margin-bottom: calc(-1 * var(--padding));
	}

	/* Menu locks to top of window when page is scrolled, this is the default behaviour for modern browsers. */
	@supports (position: sticky) {
		.page:not(.page--sticky) .sidebar {
			top: 0;
			position: sticky;
			max-height: 100vh;
		}
	}


	/* TOGGLE BUTTON (added by JS) */

	.js__sidebar .sidebar__toggle {
		float: right;
		margin: 0;
	}

	/* Smaller screens. */
	@media only screen and (max-width: calc(60rem - 1px) ) {
		.sidebar__toggle .icon {
			transform: rotate(90deg);
		}
	}


	/* SIDEBAR CLOSED */

	/* Larger screens. */
	@media only screen and (min-width: 60rem) {
		.js__sidebar[minimized='1'] {
			flex: 0 0 5.6rem;
			position: relative;
		}
			.js__sidebar[minimized='1'] .sidebar__content,
			.js__sidebar[minimized='1'] .sidebar__footer {
				display: none; 
			}
	}
	/* Smaller screens. */
	@media only screen and (max-width: calc(60rem - 1px) ) {
		/* Stops the page behind the sidebar from scrolling whilst the sidebar is expanded. */
		.page:has(.js__sidebar[minimized='0']) {
			overflow: hidden;
		}
			.js__sidebar[minimized='0'] {
				bottom: 0;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 200;
			}
				.sidebar__content,
				.sidebar__footer {
					display: none; 
				}
				.js__sidebar[minimized='0'] .sidebar__content {
					display: block; 
				}
				.js__sidebar[minimized='0'] .sidebar__footer {
					display: flex; 
				}
	}

	/* Sidebar links. */
	.page__sidebar h4 a:not([class]) {
		color: rgb(255,255,255);
		text-decoration: none;
	}
	.page__sidebar a:hover:not([class]) {
		text-decoration: underline;
	}
	.page__sidebar a:focus-visible:not([class]) {
		background: rgb(255,255,255);
	}



/* Hero */

	:root {
		--hero-background: 
			linear-gradient(
				0deg,
				rgba(5,152,214,0.5) 0,
				rgba(5,152,214,0) 100%
			),
			linear-gradient(
				0deg,
				rgb(0,44,62) 0,
				rgb(0,44,62) 100%
			);
		--hero-text: rgb(255,255,255);
	}

	.hero {
		background: var(--hero-background);
		background-position: right top;
		background-size: cover;
		color: var(--hero-text);
		overflow: hidden;
		padding-bottom: var(--gutter);
	}



/* Comparison Group */

	:root {
		--compare-bk: 
			linear-gradient(
				0deg,
				rgba(var(--basalt),0.075) 0,
				rgba(var(--basalt),0.075) 100%
			),
			linear-gradient(
				0deg,
				rgb(255,255,255) 0,
				rgb(255,255,255) 100%
			);
		--compare-alt-bk: rgb(255,255,255);
		--compare--stripe: rgb(var(--tango));
		--compare--stripe-disabled: rgba(var(--basalt),0.3);
	}
	.theme--light {
		--compare-bk: 
			linear-gradient(
				0deg,
				rgba(var(--basalt),0.075) 0,
				rgba(var(--basalt),0.075) 100%
			),
			linear-gradient(
				0deg,
				rgb(255,255,255) 0,
				rgb(255,255,255) 100%
			);
		--compare-alt-bk: rgb(255,255,255);
		--compare--stripe: rgb(var(--tango));
		--compare--stripe-disabled: rgba(var(--basalt),0.3);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--compare-bk: 
				linear-gradient(
					0deg,
					rgba(255,255,255,0.1) 0,
					rgba(255,255,255,0.1) 100%
				),
				linear-gradient(
					0deg,
					rgb(var(--coal)) 0,
					rgb(var(--coal)) 100%
				);
			--compare-alt-bk: rgba(255,255,255,0.05);
			--compare--stripe-disabled: rgba(255,255,255,0.15);
		}
	}
	.theme--dark {
		--compare-bk: 
			linear-gradient(
				0deg,
				rgba(255,255,255,0.1) 0,
				rgba(255,255,255,0.1) 100%
			),
			linear-gradient(
				0deg,
				rgb(var(--coal)) 0,
				rgb(var(--coal)) 100%
			);
		--compare-alt-bk: rgba(255,255,255,0.05);
		--compare--stripe-disabled: rgba(255,255,255,0.15);
	}

	.compare {
		/* Used later to set the number of columns displayed at different container sizes. */
		container-type: inline-size;
		container-name: compare-group;
	}
		.compare .cards {
			/* If group is a top level element, so not nested inside another set of cards we need to clear the vertical margins. */
			margin-bottom: 0;
			margin-top: 0;
			/* Set a basic grid of all elements forced into columns. We do a dumb force everything into a single row so we have full control over when the layout shifts, so we can avoid single wrapping items. */
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		}

		/*
			As we can't use CSS custom values directly in a CSS query we have to effectively switch our viewpoint and have static container size queries where the grid settings is fed in by the custom value. We do things this way as the breakpoint is content dependent, a group of simple cards may not need to have the columns adjusted, where something text-heavy may need to shift sooner. We let the HTML decide.

		  Because we have a breakpoint in Blinky where the base text size switches we need to cover both base text sizes in the container query, which means layering up with a media query too.

			Base Text Size (shown in px for simplicity)
			Window width 0-1600px: 16px
			Window width +1600px: 18px

			This is a difference of 1.125%. We use this % to calulate the container size in the min-width media query.

			Finally, remember that each pair of queries has to cover the 1px that will be missed if we just run from even 100em, etc, hence the max-width of 9909375em.
		*/

		/* 1100-1300px */
		@media only screen and (max-width: 99.9375em) {
			@container compare-group (max-width: 130rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-large, auto-fit), minmax(0, 1fr));
				}
			}
		}
		@media only screen and (min-width: 100em) {
			@container compare-group (max-width: 115.555555556rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-large, auto-fit), minmax(0, 1fr));
				}
			}
		}

		/* 900-1100px */
		@media only screen and (max-width: 99.9375em) {
			@container compare-group (max-width: 110rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-medium, var(--bp-large, auto-fit)), minmax(0, 1fr));
				}
			}
		}
		@media only screen and (min-width: 100em) {
			@container compare-group (max-width: 97.777777778rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-medium, (--bp-large, auto-fit)), minmax(0, 1fr));
				}
			}
		}

		/* 700-900px */
		@media only screen and (max-width: 99.9375em) {
			@container compare-group (max-width: 90rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit))), minmax(0, 1fr));
				}
			}
		}
		@media only screen and (min-width: 100em) {
			@container compare-group (max-width: 80rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit))), minmax(0, 1fr));
				}
			}
		}

		/* 500-700px */
		@media only screen and (max-width: 99.9375em) {
			@container compare-group (max-width: 70rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-tiny, var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit)))), minmax(0, 1fr));
				}
			}
		}
		@media only screen and (min-width: 100em) {
			@container compare-group (max-width: 62.222222222rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-tiny, var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit)))), minmax(0, 1fr));
				}
			}
		}

		/* 300-500px */
		@media only screen and (max-width: 99.9375em) {
			@container compare-group (max-width: 50rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-micro, var(--bp-tiny, var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit))))), minmax(0, 1fr));
				}
			}
		}
		@media only screen and (min-width: 100em) {
			@container compare-group (max-width: 44.444444444rem) {
				.compare > .cards {
					grid-template-columns: repeat(var(--bp-micro, var(--bp-tiny, var(--bp-small, var(--bp-medium, var(--bp-large, auto-fit))))), minmax(0, 1fr));
				}
			}
		}

			.compare .card,
			/* This is to override the nested card behaviour. */
			.cards .compare .card {
				background: var(--compare-bk);
				padding: var(--padding);
				
				display: grid;
				gap: var(--gutter);
				grid-template-rows: subgrid;
			}
			/* This is used if the compare group isn't in a card with a background. */
			.compare.compare--alt .card,
			.cards .compare.compare--alt .card {
				background: var(--compare-alt-bk);
			}
				/* Check the first card, if it's missing an element we hide that same element on all other cards in the group. We do this to properly enforce the subgrid as it needs a consistent number of elements. */
				.compare > .cards:not(:has(.card:first-child .compare__header)) .compare__header,
				.compare > .cards:not(:has(.card:first-child .compare__stripe)) .compare__stripe,
				.compare > .cards:not(:has(.card:first-child .compare__cta)) .compare__cta,
				.compare > .cards:not(:has(.card:first-child .compare__content)) .compare__content {
					display: none;
				}
			/* Using the first card we set the subgrid grid-row to the number of children in the card. */
			.compare > .cards:has(.card:first-child *:nth-child(2)) .card {
				grid-row: span 2;
			}
			.compare > .cards:has(.card:first-child *:nth-child(3)) .card {
				grid-row: span 3;
			}
			.compare > .cards:has(.card:first-child *:nth-child(4)) .card {
				grid-row: span 4;
			}
		
				.compare__header,
				.compare__cta,
				.compare__stripe {
					text-align: center;
				}
				.compare__stripe {
					background: var(--compare--stripe);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: calc(var(--padding) * -1);
					margin-right: calc(var(--padding) * -1);
					padding: calc(var(--padding) / 2);
				}
				.compare .card--callout--tango .compare__stripe {
					background: var(--compare-bk);
				}
					.compare__stripe span {
						margin-bottom: 0;
					}
				.compare__content ul {
					font-size: 1.4rem;
					font-weight: 500;
				}

			.card.compare--disabled {
				color: rgba(var(--page-text), 0.75);
			}
				.card.compare--disabled .compare__stripe {
					background: var(--compare--stripe-disabled);
				}
	/* Table */

	:root {
		--table-hightlight-bk: var(--tango);
		--table-hightlight-opacity: 0.5;
	}
	.theme--light {
		--table-hightlight-opacity: 0.5;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--table-hightlight-opacity: 0.25;
		}
	}
	.theme--dark {
		--table-hightlight-opacity: 0.25;
	}
	
	
	.table {
		border-collapse:separate;
		min-width: min-content;
	}
	.table--full-width {
		width: 100%;
	}

	/* Is the table block followed immediately with some basic text types? */
	.table:has( + :where(p, ul, ol)),
	.scroll:has(.table):has( + :where(p, ul, ol)) {
		margin-bottom: calc(var(--gutter) * 2);
	}

	/* Fix for parent items breaking the horizontal scroll, I've added it here for the moment as this needs much more testing for something so fundamental as the card system. */
	.card:has(blinky-scroll-hints.scroll .table) {
		overflow: auto;
	}

	/* If we assume ltr content order then... */
	/* Left. */
	.table.table__align--start {
		margin-inline-end: auto;
	}
	/* Right. */
	.table.table__align--end {
		margin-inline-start: auto;
	}
	/* Centre. */
	.table.table__align--center,
	/* TODO: Old class, in use in Cloud, when I nuke it it can be removed. */
	.table.table--align-center {
		margin-inline-start: auto;
		margin-inline-end: auto;
	}

	.table.table__align--top :where(th, td),
	.table .table__align--top {
		vertical-align: top;
	}
	.table.table__align--bottom :where(th, td),
	.table .table__align--bottom {
		vertical-align: bottom;
	}

		.table :where(th, td) {
			border-block-end: solid 1px color-mix(in srgb, currentColor 15%, transparent);
			padding: calc(var(--padding) / 2) var(--padding);
			text-align: start;
		}
		/* If there's no thead add a top border. */
		.table:not(:has(thead)) :where(th, td) {
			border-block-start: solid 1px color-mix(in srgb, currentColor 15%, transparent);
		}

		/* Used in tbody. */
		.table th {
			font-weight: 500;
		}
		/* Give the th more prominence when the table is a vertical rather then having a secondary row key on a horizontal table. */
		.table:not(:has(thead)) tbody th {
			font-weight: 700;
		}
		/* Extra emphasis when in an actual table thead. */
		.table thead th {
			border-block-end-width: 2px;
			font-weight: 700;
		}
		/* Repeat header row further down the table, useful for long tables. */
		.table tr + tr:not(:has(td)) th,
		.table tbody > tr:not(:has(td)) th {
			border-block-end-width: 2px;
			padding-top: calc(var(--padding) * 1.5);
		}

		.table.table--emphasise-headers thead th,
		.table.table--emphasise-headers tr + tr:not(:has(td)) th,
		.table.table--emphasise-headers tbody > tr:not(:has(td)) th {
			background: color-mix(in srgb, currentColor 5%, transparent);
			padding-top: calc(var(--padding) / 2);
		}

		/* Left and right edge padding. */
		.table th:first-child,
		.table td:first-child {
			padding-left: calc(var(--padding) / 4);
		}
		.table th:last-child,
		.table td:last-child {
			padding-right: calc(var(--padding) / 4);
		}

		/* Grouped rows and cols. */
		.table tr.table--grouped-with :where(th, td) {
			border-bottom: none;
			padding-bottom: 0;
		}
		.table tr.table--grouped-with + tr :where(th, td) {
			padding-top: calc(var(--padding)/ 4)
		}
		/* Use :is for the extra specifity. */
		.table :is(th, td).table--grouped-with {
			padding-right: 0;
		}
		.table :is(th, td).table--grouped-with + :where(th, td) {
			padding-left: 0.3em;
		}
		
		/* Applying things to columns is painful, leading to code like below. 
			.table__nowrap can be applied to the TABLE, TR or an individual cell. */
		.table__nowrap--1 tr > *:nth-child(1), 
		.table__nowrap--2 tr > *:nth-child(2), 
		.table__nowrap--3 tr > *:nth-child(3), 
		.table__nowrap--4 tr > *:nth-child(4), 
		.table__nowrap--5 tr > *:nth-child(5), 
		.table__nowrap--6 tr > *:nth-child(6), 
		.table__nowrap--7 tr > *:nth-child(7), 
		.table__nowrap--8 tr > *:nth-child(8), 
		.table__nowrap--9 tr > *:nth-child(9), 
		tr.table__nowrap > *, 
		.table__nowrap {
			white-space: nowrap;
		}

		/* Brite force a 0 padding, a bit nuclear but sometimes it's needed. */
		.table .table__cell-no-pad {
			padding: 0;
		}


	.table .table--highlight {
		background: rgba(var(--tango), var(--table-hightlight-opacity));
	}

	.table .table__caption {
			border-block-end: solid 2px color-mix(in srgb, currentColor 15%, transparent);
			font-weight: 500;
			padding-bottom: calc(var(--padding) / 2);
	}


	/* Adjust the vertical margins on buttons in thead. */
	.table thead .button {
		margin-top: calc( (var(--padding)/ 2) * -1);
  	margin-bottom: calc( (var(--padding)/ 2) * -1);
	}
	.table thead .button:last-child {
		/* This fixes an annoying issue where about this much space is added due to a space in the code. */
  	margin-left: -0.25em;
  	margin-right: calc( var(--padding) * -1);
	}
	/* This is applied if the th/td has a button but does not have a .no-wrap around the button and the last word of text. We need this otherwise we can get an unsightly layout where the button is wrapped on its own. */
	.table thead :where(th, td):has(.button):not(:has(.no-wrap)) {
		white-space: nowrap;
	}
		.table th .sort--desc .icon {
			transform: rotate(180deg);
		}
		.table .sort--inactive .icon {
			opacity: 0.4;
		}


	/* These have to be added as a psuedo element due to the pattern in Cloud where we have console logs inside table cells with no pagging, using a border or partial background on the table will get hidden by the console log. */
	.table tr .table__color-tag,
	.table tr.table__color-tag > :where(th, td) {
		position: relative;
		padding-left: calc((var(--padding) / 4) + 0.4rem);
	}
	.table tr .table__color-tag:before, 
	.table tr .table__color-tag:after,
	.table tr.table__color-tag > :where(th, td):before,
	.table tr.table__color-tag > :where(th, td):after {
		content: "";
		width: 0.4rem;
		position: absolute;
		left: 0px;
	}
	.table tr .table__color-tag:before,
	.table tr.table__color-tag > :where(th, td):before {
		height: 100%;
		top: 0;
		opacity: 0.5;
	}
	/* Covers the cell bottom border to blend it in a little. */
	.table tr .table__color-tag:after,
	.table tr.table__color-tag > :where(th, td):after {
		height: 1px;
		bottom: -1px;
		opacity: 0.75;
	}
	.table th.table__color-tag:after
	.table tr.table__color-tag th:after {
		height: 2px;
	}
	.table th.table__color-tag:before, 
	.table tr.table__color-tag > th:before {
		opacity: 1;
	}
	.table tr .table__color-tag--tango:before, 
	.table tr .table__color-tag--tango:after,
	.table tr.table__color-tag--tango > :where(th, td):before,
	.table tr.table__color-tag--tango > :where(th, td):after {
		background: rgb(var(--tango));
	}
	.table tr .table__color-tag--midnight:before, 
	.table tr .table__color-tag--midnight:after,
	.table tr.table__color-tag--midnight > :where(th, td):before,
	.table tr.table__color-tag--midnight > :where(th, td):after {
		background: rgb(var(--midnight));
	}
	.table tr .table__color-tag--smurf:before, 
	.table tr .table__color-tag--smurf:after,
	.table tr.table__color-tag--smurf > :where(th, td):before,
	.table tr.table__color-tag--smurf > :where(th, td):after {
		background: rgb(var(--smurf));
	}
	.table tr .table__color-tag--marmalade:before, 
	.table tr .table__color-tag--marmalade:after,
	.table tr.table__color-tag--marmalade > :where(th, td):before,
	.table tr.table__color-tag--marmalade > :where(th, td):after {
		background: rgb(var(--marmalade));
	}
	.table tr .table__color-tag--gecko:before, 
	.table tr .table__color-tag--gecko:after,
	.table tr.table__color-tag--gecko > :where(th, td):before,
	.table tr.table__color-tag--gecko > :where(th, td):after {
		background: rgb(var(--gecko));
	}
	.table tr .table__color-tag--plum:before, 
	.table tr .table__color-tag--plum:after,
	.table tr.table__color-tag--plum > :where(th, td):before,
	.table tr.table__color-tag--plum > :where(th, td):after {
		background: rgb(var(--plum));
	}
	.table tr .table__color-tag--candy:before, 
	.table tr .table__color-tag--candy:after,
	.table tr.table__color-tag--candy > :where(th, td):before,
	.table tr.table__color-tag--candy > :where(th, td):after {
		background: rgb(var(--candy));
	}
	.table tr .table__color-tag--mud:before, 
	.table tr .table__color-tag--mud:after,
	.table tr.table__color-tag--mud > :where(th, td):before,
	.table tr.table__color-tag--mud > :where(th, td):after {
		background: rgb(var(--mud));
	}
	.table tr .table__color-tag--slate:before, 
	.table tr .table__color-tag--slate:after,
	.table tr.table__color-tag--slate > :where(th, td):before,
	.table tr.table__color-tag--slate > :where(th, td):after {
		background: rgb(var(--slate));
	}
	.table tr .table__color-tag--ortolan:before, 
	.table tr .table__color-tag--ortolan:after,
	.table tr.table__color-tag--ortolan > :where(th, td):before,
	.table tr.table__color-tag--ortolan > :where(th, td):after {
		background: rgb(var(--ortolan));
	}
/* Tab Group */

	:root {
		--tab-group-bk: rgb(var(--concrete));
		--tab-group-active-bk: rgb(255,255,255);
	}
	.theme--light {
		--tab-group-bk: rgb(var(--concrete));
		--tab-group-active-bk: rgb(255,255,255);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--tab-group-bk: 
				linear-gradient(
					rgba(255,255,255, 0.05), 
					rgba(255,255,255, 0.05)), 
				rgb(var(--coal));
			--tab-group-active-bk: rgba(var(--coal), 1);
		}
	}
	.theme--dark {
		--tab-group-bk: 
			linear-gradient(
				rgba(255,255,255, 0.05), 
				rgba(255,255,255, 0.05)), 
			rgb(var(--coal));
		--tab-group-active-bk: rgba(var(--coal), 1);
	}

	/* Group container, can be either a collapsible summary/details if we need to not use tonnes of space if JS isn't available or just a straigt up section. */
	.tab-group.tab-group--box {
		background: var(--tab-group-bk);
		border-radius: var(--block-radius);
		padding: var(--padding);
	}

	.tab-group__tabs {
		display: none;
		position: relative;
		z-index: 1;
	}
	.js .tab-group__tabs {
		display: block;
	}
		.tab-group__tab.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear) {
			padding: 0.8rem var(--padding);
			border-radius: var(--button-radius) var(--button-radius) 0 0;
			box-shadow: none;
			margin: 0 0rem;
		}
		.tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover), 
		.tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
			background: var(--tab-group-bk);
			color: rgb(var(--page-text));
		}
		.tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover), 
		.tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
			background: var(--tab-group-active-bk);
		}

	.tab-group__content {
		background: var(--tab-group-bk);
		border-radius: var(--block-radius);
		padding: var(--padding);
	}
	.tab-group--box .tab-group__content {
		background: var(--tab-group-active-bk);
		padding: var(--padding);
	}
	.tab-group__content + .tab-group__content {
		margin-top: var(--gutter);
	}
	.js .tab-group__content {
		display: none;
		border-radius: 0 var(--block-radius) var(--block-radius) var(--block-radius);
	}
	.js .tab-group__content + .tab-group__content {
		margin-top: 0;
	}
	.js .tab-group__content--active {
		display: block;
	}



/* Accordion */

	:root {
		--accordion-border: rgba(var(--basalt), 0.25);
	}
	.theme--light {
		--accordion-border: rgba(var(--basalt), 0.25);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--accordion-border: rgba(255,255,255, 0.15);
		}
	}
	.theme--dark {
		--accordion-border: rgba(255,255,255, 0.15);
	}


	.accordion__item {
		border: solid 1px var(--accordion-border);
		column-gap: var(--padding);
		display: grid;
		grid-template-columns: 1fr fit-content(50%);
		grid-template-areas: 'a b''c c';
		padding: 0.8rem var(--padding);
		position: relative;
	}
	.accordion__item + .accordion__item {
		border-top: none;
	}
	.accordion__item:first-child {
		border-radius: var(--button-radius) var(--button-radius) 0 0;
	}
	.accordion__item:last-child {
		border-radius: 0 0 var(--button-radius) var(--button-radius);
	}
	
	.accordion__visible {
		grid-area: a;
	}
		.accordion__toggle,
		.accordion__button {
			grid-area: b;
			margin: -0.8rem calc(var(--padding) * -1) !important;
			white-space: nowrap;
		}
		.accordion__toggle.button--ghost,
		.accordion__button.button--ghost {
			margin: -0.8rem 0 !important;
		}
		.accordion__toggle .icon {
			transition: all 0.2s ease-in-out;
		}
		.accordion__toggle[aria-expanded="false"] .icon {
			transform: rotate(90deg);
		}
		.accordion__toggle[aria-expanded="true"] .icon {
			transform: rotate(-90deg);
		}

		.accordion__content {
			grid-area: c;
			margin: -0.8rem calc(var(--padding) * -1);
			margin-top: 0.4rem;
			overflow: hidden;
			padding: 0.3rem var(--padding);
			transition: max-height 0.3s ease-in-out;
		}
		[aria-expanded="false"] + .accordion__content {
			max-height: 0vh;
			padding: 0.3rem var(--padding);
			visibility: hidden;
		}
		[aria-expanded="true"] + .accordion__content {
			max-height: 100vh;
			padding: 0.8rem var(--padding);
			visibility: visible;
		}

	@media only screen and (max-width: 18em) {
		.accordion__item {
			display: block;
		}
			.accordion .accordion__item .accordion__toggle,
			.accordion .accordion__item .accordion__button {
				display: block;
				margin: 0 auto -0.8rem auto !important;
			}
	}



/* Console log */

	.console {
		background: rgb(var(--coal));
		color: rgb(255,255,255);
	}
	.console--light {
		background: rgb(255,255,255);
		color: rgb(var(--coal));
	}
		.console pre {
			padding: calc(var(--padding) / 2);
			max-height: 30rem;
		}
		/* Adjust the padding slightly for consoles inside tables so the left margin matches. */
		.table .console pre {
			padding-left: 0;
			padding-right: 0;
		}


		
/* Highlights panel */

	:root {
		--highlights-background: rgba(var(--basalt), 0.75);
	}
	.theme--light {
		--highlights-background: rgba(var(--basalt), 0.75);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--highlights-background: rgba(255,255,255, 0.35);
		}
	}
	.theme--dark {
		--highlights-background: rgba(255,255,255, 0.35);
	}



	.highlights {
		--hl-status-display: flex;
		--hl-status-pad: var(--padding) var(--padding) var(--padding) 0;
		--hl-status-border-h: solid 4px var(--page-background);
		--hl-status-border-b: none;
	}
	@media only screen and (max-width: 40rem) {
		.highlights--width-40.highlights {
			--hl-status-display: block;
			--hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
			--hl-status-border-h: none;
			--hl-status-border-b: solid 4px var(--page-background);
		}
	}
	@media only screen and (max-width: 60rem) {
		.highlights--width-60.highlights {
			--hl-status-display: block;
			--hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
			--hl-status-border-h: none;
			--hl-status-border-b: solid 4px var(--page-background);
		}
	}
	@media only screen and (max-width: 80rem) {
		.highlights--width-80.highlights {
			--hl-status-display: block;
			--hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
			--hl-status-border-h: none;
			--hl-status-border-b: solid 4px var(--page-background);
		}
	}


	.page .highlights {
		background: var(--highlights-background);
		color: #fff;
		display: var(--hl-status-display);
		border-radius: var(--block-radius);
		overflow: hidden;
	}
		.highlights__section {
			padding: var(--hl-status-pad);
			display: var(--hl-status-display);
			align-items: center;
		}

		/* First item needs full padding. */
		.highlights__section:first-child,
		.highlights__status + .highlights__section {
			padding: var(--padding);
		}


	.highlights--center {
		justify-content: center;
	}
		.highlights--center .highlights__section {
			text-align: center;
		}
	.highlights--right {
		justify-content: flex-end;
	}
		.highlights--right .highlights__section {
			text-align: right;
		}

	.highlight--right {
		flex-grow: 999;
		justify-content: flex-end;
		text-align: right;
	}


	.highlights__status {
		border-right: var(--hl-status-border-h);
		border-bottom: var(--hl-status-border-b);
		white-space: nowrap;
	}
	.highlights--center .highlights__status, 
	.highlights--right .highlights__status {
		/* We set as box-shadow because this needs to go away if the status box ends up slush left in its container. */
		box-shadow: -4px 0 var(--page-background);
	}


	.highlights a:not([class]),
	.highlights .button.button--plain {
		color: currentColor;
	}
	.highlights a:focus:not([class]), 
	.highlights a:focus-visible:not([class]),
	.highlights .button.button--plain:focus,
	.highlights .button.button--plain:focus-visible {
		background: rgb(255,255,255);
		color: rgb(var(--coal));
	}
	.highlights a:focus:not(:focus-visible):not([class]),
	.highlights .button.button--plain:focus:not(:focus-visible):not([class]) {
		background: none;
		color: currentColor;
	}


	/* Status colours. */
	.highlights__status.highlights__status--good {
		background: rgb(var(--frog));
	}
	.highlights__status.highlights__status--goodish {
		background: linear-gradient(45deg, rgba(var(--basalt),1) 49%, rgba(var(--frog),1) 50%);
	}
	.highlights__status.highlights__status--badish {
		background: linear-gradient(45deg, rgba(var(--cherry),1) 49%, rgba(var(--frog),1) 50%);
	}
	.highlights__status.highlights__status--neutral {
		background: rgb(var(--basalt));
	}
	.highlights__status.highlights__status--bad {
		background: rgb(var(--cherry));
	}



/* Copy Box */

	.copy-box {
		--copy-box-border: rgb(var(--smurf));
	}
	.copy-box, 
	.theme--light .copy-box {
		--copy-box-background: rgb(255,255,255);
		--copy-box-anim:
			linear-gradient(
				rgba(var(--smurf), 0.25),
				rgba(var(--smurf), 0.25))
			rgb(255,255,255);
	}
	@media (prefers-color-scheme: dark) {
		.copy-box {
			--copy-box-background: rgb(var(--coal));
			--copy-box-anim:
				linear-gradient(
					rgba(var(--smurf), 0.5),
					rgba(var(--smurf), 0.5))
				rgb(var(--coal));
		}
	}
	.theme--dark .copy-box {
		--copy-box-background: rgb(var(--coal));
		--copy-box-anim:
			linear-gradient(
				rgba(var(--smurf), 0.5),
				rgba(var(--smurf), 0.5))
			rgb(var(--coal));
	}

	.copy-box {
		align-items: start;
		display: inline-grid;
		grid-template-columns: 1fr max-content;
		position: relative;
	}
		.no-js .copy-box > *:first-child, 
		.copy-box__content {
			border: 1px dashed var(--copy-box-border);
			background: var(--copy-box-background);
			padding: calc(0.8rem - 2px) 0.8rem;
			position: relative;
			/* Allows the trick to use the animation to click to select the content. */
			user-select: all;
		}
		/* Played when the user clicks on the content to copy. The first click selects all the content, a second click allows the user to manually select. Without the animation they would only ever be able to select all. */
		.no-js .copy-box > *:first-child:focus,
		.copy-box__content:focus,
		.copy-box__content--focussed {
			animation: to-copy 100ms step-end forwards;
		}
		@keyframes to-copy {
			to {
				-webkit-user-select: text;
				user-select: text;
			}
		}
		/* Played when the user clicks on the copy button. */
		.copy-box__content--copied {
			animation: copy-box 0.5s ease-out;
			animation-fill-mode: forwards;
		}
		@keyframes copy-box {
			0% {
				background: var(--copy-box-background);
			}
			50% {
				background: var(--copy-box-anim);
			}
			100% {
				background: var(--copy-box-background);
			}
		}
		.copy-box__button {
			flex: 0 0 auto;
		}
		


/* Status Label */

	.status-label {
		color: currentcolor;
		font-size: 1.3rem;
		font-weight: bold;
		text-transform: uppercase;
		white-space: nowrap;
	}
	a.status-label:hover {
		text-decoration: none;
	}
	a.status-label:focus, 
	a.status-label:focus-visible {
		background: rgb(var(--link-color));
		border-radius: 2px;
		color: rgb(var(--link-color-focus));
		text-decoration: none;
	}
	a.status-label:focus:not(:focus-visible) {
		background: none;
		border-radius: 0;
		color: rgb(var(--link-color));
		text-decoration: underline;
	}
	.status-label--bk {
		background: color-mix(in srgb, currentColor 10%, transparent);
		display: inline-block;
		padding: 0.1rem 0.4rem;
	}
		.status-label .icon {
			fill: currentColor;
		}
		a.status-label:focus .icon, 
		a.status-label:focus-visible .icon {
			fill: rgb(var(--link-color-focus));
		}
		a.status-label:focus:not(:focus-visible) .icon {
			fill: rgb(var(--link-color));
		}



/* Status */

	:root {
		--popup-background: 255,255,255;
		--popup-text: var(--page-text);
		--popup-page-text: var(--page-text);
		--popup-status-link: 0,115,165;
		--whisper: var(--concrete);
		--whisper-form:
			linear-gradient(
				0deg,
				rgba(255,255,255,0.65) 0,
				rgba(255,255,255,0.65) 100%
			),
			linear-gradient(
				0deg,
				rgb(var(--concrete)) 0,
				rgb(var(--concrete)) 100%
			);
	}
	.theme--light {
		--popup-background: 255,255,255;
		--popup-text: var(--page-text);
		--popup-page-text: var(--page-text);
		--popup-status-link: 0,115,165;
		--whisper: var(--concrete);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--popup-background: var(--basalt);
			--popup-text: var(--page-text);
			--popup-page-text: 255,255,255;
			--popup-status-link: 255,255,255;
		}
	}
	.theme--dark {
		--popup-background: var(--basalt);
		--popup-text: var(--page-text);
		--popup-page-text: 255,255,255;
		--popup-status-link: 255,255,255;
		--whisper: var(--jet);
		--whisper-form:
			linear-gradient(
				0deg,
				rgba(255,255,255,0.03) 0,
				rgba(255,255,255,0.03) 100%
			),
			linear-gradient(
				0deg,
				rgb(var(--jet)) 0,
				rgb(var(--jet)) 100%
			);
	}

	

	.status {
		background: rgb(var(--basalt));
		border-radius: var(--block-radius);
		color: rgb(255,255,255);
		padding: var(--padding);
		position: relative;
	}
		/* Hide by default anything that is optional. */
		.status__title, 
		.status__icon, 
		.status .status__close-button,
		.status__actions {
			display: none;
		}

		.status .icon {
			/* fill: rgb(255,255,255) !important; */
			fill: currentColor;
		}
		/* .theme--light .status.popup:not(.status--success):not(.status--error) .icon {
			fill: rgb(var(--page-text)) !important;
		} */
		/* .popup:not(.status--success):not(.status--error) .icon {
			fill: rgb(var(--popup-page-text)) !important;
		} */
		/* .status button .icon {
			fill: rgb(255,255,255) !important;
		} */


		/* With close button */
		.status--cb .status__close-button {
			display: block;
			margin: 0;
			position: absolute;
			right: 0;
			top: 0;
		}
		/* Add some spacing to accommodate the close button in top right. */
		.status--cb .status__title, 
		.status--cb .status__content {
			margin-right: calc(4rem - var(--padding));
		}


		/* With title */
		.status--title .status__title {
			display: block;
		}
		/* If there's a title and a close button in use we can remove the spacing 
		   for the close button as the main content is likely underneath it. */
		.status--title.status--cb:not(.status--icon) .status__content {
			margin-right: 0;
		}


		/* With icon */
		.status--icon .status__icon {
			display: block;
			left: var(--padding);
			position: absolute;
			top: var(--padding);
			width: 3.2rem;
			height: 3.2rem;

			/* This is to shrink the icon if we have short status text that is only 
			   one line long, the minimum height of the status block ends up at 
			   about 48px tall so we show an icon that's 24px in height. */
			max-height: 50%;
		}
		.status--icon .status__title, 
		.status--icon .status__content {
			margin-left: calc(var(--padding) + 3.2rem);
			margin-right: calc(var(--padding) + 3.2rem);
		}


	.status.status--small {
		padding: calc(var(--padding) / 2);
	}
		.status--icon.status--small .status__icon {
			width: 2rem;
			height: 2rem;
			top: calc(var(--padding) / 2);
		}
		.status--icon.status--small .status__content {
			margin-left: calc(var(--padding) + 2rem);
		}


		/* With actions */
		.status--actions {
			/* Add 25% extra padding to the bottom to visually balance things out. */
			padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
		}
			.status--actions .status__actions {
				display: block;
				padding-top: calc(var(--gutter) / 4);
				text-align: center;
			}
			.status--actions:not(.status--small) .status__actions {
				padding-top: calc(var(--gutter) * 2);
			}


	.status:not(.status--whisper) a:not([class]),
	/* Fix for the broken way we're implementing the popups in Cloud with Unpoly. */
	.popup:not(.status--success):not(.status--error) .status:not(.status--whisper) a:not([class]) {
		color: rgb(255,255,255);
	}
	.popup:not(.status--success):not(.status--error) a:not([class]) {
		color: rgb(var(--popup-status-link));
	} 

			
	.status--error {
		background: rgb(var(--cherry)) !important;
	}
	.status--success {
		background: rgb(var(--frog)) !important;
	}
	.status--whisper {
		background: rgb(var(--whisper)) !important;
		color: currentColor;
	}
	.form .status--whisper {
		background: var(--whisper-form) !important;
	}



	.popup__freeze-page {
		overflow: hidden;
	}
		.popup__overlay {
			align-items: center;
			background: rgba(var(--coal), 0.9);
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 700;
		}
			.popup {
				background: rgb(var(--popup-background));
				border-radius: var(--block-radius);
				box-shadow: 0px 20px 20px 4px rgba(var(--onyx),0.9);
				color: rgb(255,255,255);
				display: inline-flex;
				flex-direction: column;
				margin: var(--gutter) 0;
				padding: var(--padding);
				position: relative;
				width: 60rem;
			}
			/* .theme--light .popup:not(.status--success):not(.status--error) {
				color: rgb(var(--page-text));
			} */

			/* Popup that isn't a success or error, on light theme by default or with .theme--light only, all other instances of this will be white. */
			.popup:not(.status--success):not(.status--error) {
				color: rgb(var(--popup-page-text));
			}
				.popup .status__title, 
				.popup .status__actions {
					flex: 0 0 auto;
				}
				.popup .status__content {
					flex: 1 0 auto;

					/* The 22rem is very approximate, this doesn't need to be pixel perfect so an approximation of when to kick in the scoll is fine. It allows for titles of two lines. */
					max-height: calc(100vh - 22rem);
				}

	.status--tiny {
		display: inline-block;
		padding: calc(var(--padding) / 2);
		padding-right: var(--padding);
	}
		.status--tiny .status__icon {
			display: block;
			left: var(--padding);
			position: absolute;
			/* This is to shrink the icon if we have short status text that is only 
			   one line long, the minimum height of the status block ends up at 
			   about 48px tall so we show an icon that's 24px in height. */
			max-height: 50%;

			width: 2rem;
			height: 2rem;
			top: calc(var(--padding)/ 1.8);
		}
		.status--tiny .status__icon ~ .status__content {
			margin-left: calc(var(--padding) + 2rem);
			display: flex;
			flex-wrap: wrap;
			gap: 0.8rem;
		}
		
		.status--tiny .status__actions {
			display: inline-block;
			margin: -0.8rem 0;
		}


	
	:root {
		--notifictions-bk: rgb(255,255,255);
		--notifiction-bk: rgba(var(--concrete), 0.4);
		--notifictions-text: var(--basalt);
	}
	.theme--light {
		--notifictions-bk: rgb(255,255,255);
		--notifiction-bk: rgba(var(--concrete), 0.4);
		--notifictions-text: var(--basalt);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--notifictions-bk: linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));
			--notifiction-bk: rgba(var(--coal), 0.5);
			--notifictions-text: 255,255,255;
		}
	}
	.theme--dark {
		--notifictions-bk: linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));
		--notifiction-bk: rgba(var(--coal), 0.5);
		--notifictions-text: 255,255,255;
	}

	.notifications--popup.notifications {
		display: inline-block;
		position: relative;
		z-index: 1;
	}

		.notifications .button.notification__button:first-child {
			margin-left: calc((var(--gutter)/ 2) - 2px) !important;
			margin-right: 0 !important;
		}
		.notifications .button.notification__button[aria-expanded='true'] {
			background: var(--notifictions-bk) !important;
			position: relative;
			z-index: 1;
		}
		.button.notification__button[aria-expanded='true']:after {
			background: var(--notifictions-bk);
			bottom: -8px;
			content: '';
			display: block;
			height: 10px;
			left: 0;
			position: absolute;
			width: 100%;
		}
			.button.notification__button .icon {
				height: 2.4rem;
				margin: -4px -12px;
				width: 2.4rem;
			}
			.button.notification__button[aria-expanded='true'] .icon {
				fill: rgb(var(--smurf));
			}
				.notification__button use {
					display: none;
				}
				.notification__button--old use[href$=icon-bell--existing], 
				.notification__button--new use[href$=icon-bell--new], 
				.notification__button--new use[href$=icon-bell--existing], 
				.notification__button--empty use[href$=icon-bell--empty] {
					display: block;
				}
				.notification__button--new use[href$=icon-bell--new] {
					fill: rgb(var(--tango));
				}

	.notifications--popup .notifications__panel {
		background: var(--notifictions-bk);
		box-shadow: 0 1px 6px 0px rgba(var(--onyx),0.9);
		color: rgb(var(--notifictions-text));
		display: none;
		padding: var(--padding);
		position: absolute;
		right: 0;
		text-align: left;
		top: calc(100% + 3px);
		width: 40rem;
	}
	.notification__button[aria-expanded='true'] + .notifications__panel {
		display: block;
	}
		.notification__list {
			padding-bottom: var(--padding);
			padding-top: var(--padding);
		}
				.notification__list-inner {
					display: flex;
					flex-direction: column;
					gap: var(--padding);
				}
					.notification {
						background: var(--notifiction-bk);
						border-radius: var(--block-radius);
						padding: var(--padding);
						position: relative;
					}
						.notification .notification__title {
							font-weight: bold;
							padding-right: 0.8rem;
						}
						.icon.notification-pin {
							fill: currentColor;
							height: 1.6rem;
							position: absolute;
							right: 0.4rem;
							top: 0.4rem;
							width: 1.6rem;

						}
						.notification-delete {
							position: absolute;
							right: calc(var(--padding) / 2);
							bottom: calc(var(--padding) / 2);
						}

	.notification__empty-text {
		margin: 0.8rem 0 1.6rem 0;
	}

			.notification--time {
				fill: rgb(var(--smurf));
			}
			.notification--info {
				fill: rgb(var(--frog));
			}
			.notification--alert {
				fill: rgb(var(--cherry));
			}


	@media only screen and (max-width: 37.5rem) {
		.notifications--popup.notifications {
			position: static;
		}
			.notifications--popup .notifications__panel {
				left: 0;
				/* This covers the extra height on the expanded notification button. */
				margin-top: 3px;
				right: auto;
				top: auto;
				width: 100%;
			}
	}

	.page--sticky-header .notifications--popup .notification__button[aria-expanded='true'] + .notifications__panel {
		display: flex;
		flex-direction: column;
		/* Deduct the height of the sticky header, might change this to a JS solution in a future update. */
		max-height: calc(100vh - 4.5em);
	}
	.page--sticky-header .notifications--popup .notifications__panel > * {
		flex: 0 0 auto;
	}
	.page--sticky-header .notifications--popup .notification__list {
		flex: 1 1 auto;
		margin-bottom: var(--padding);
		margin-top: var(--padding);
		padding-top: 0;
		padding-bottom: 0;
	}


	

/* Shoutbox. */

	.shoutbox {
		--shoutbox-bk: rgb(var(--concrete));
		--shoutbox-bk-fm: rgb(255,255,255);
	}
	.theme--light .shoutbox {
		--shoutbox-bk: rgb(var(--concrete));
		--shoutbox-bk-fm: rgb(255,255,255);
	}
	@media (prefers-color-scheme: dark) {
		.shoutbox {
			--shoutbox-bk: rgba(var(--concrete), 0.1);
			--shoutbox-bk-fm: rgba(var(--concrete), 0.1);
		}
	}
	.theme--dark .shoutbox {
		--shoutbox-bk: rgba(var(--concrete), 0.1);
		--shoutbox-bk-fm: rgba(var(--concrete), 0.1);
	}

	/* If JS is active but before the component has been fully inited we need to hide it. */
	.js .shoutbox:not(.js__shoutbox) {
		display: none;
	}
	/* This is applied if the b-cookie attribute is missing. */
	.js .shoutbox.shoutbox--disabled, 
	/* This will also be applied if there's no JS. */
	.shoutbox {
		display: block;
	}
	.js__shoutbox {
		text-align: end;
	}
	.js__shoutbox .shoutbox__outer {
		text-align: start;
	}

	/* We can use grid to animate from an unspecific height down to 0. */
	.shoutbox__outer {
		display: grid;
		grid-template-rows: 1fr;
		--transision-duration: 0;
		transition: grid-template-rows var(--transision-duration) 0ms ease-in-out;
	}
	/* The end state of the closing animation. */
	.js__shoutbox.shoutbox--closing .shoutbox__outer {
		grid-template-rows: 0fr;
	}

		/* Actual styling for the shoutbox, as needed for inited custom elements. */
		.shoutbox:not(.js__shoutbox), 
		.shoutbox .shoutbox__inner {
			background: var(--shoutbox-bk);
			border-radius: var(--block-radius);
			color: currentColor;
			margin-bottom: var(--gutter);
			overflow: hidden;
			padding: var(--padding);
			position: relative;
			/* We need to remove the padding otherwise this prevents the shoutbox from closing completely. */
			transition: padding 100ms ease-in-out;
		}
		.form .shoutbox:not(.js__shoutbox), 
		.form .shoutbox .shoutbox__inner {
			background: var(--shoutbox-bk-fm);
			/* color: rgb(var(--basalt)); */
		}
		.shoutbox:not(.js__shoutbox).shoutbox--loud, 
		.shoutbox.shoutbox--loud .shoutbox__inner {
			background: rgb(var(--tango));
			color: rgb(var(--basalt));
		}

		/* Set the vertical padding to 0 when animating closed otherwise we'll get the padding as the final height of the element. */
		.js__shoutbox.shoutbox--closing .shoutbox__inner {
			padding: 0 var(--padding);
		}

		/* Set the padding on the right side a little larger so we don't crash into the close button. */
		.shoutbox .shoutbox__inner {
			padding-right: calc(var(--padding) * 3);
		}

		.shoutbox:not(.js__shoutbox):last-child, 
		.shoutbox .shoutbox__inner:last-child {
			margin-bottom: 0;
		}

			.button.shoutbox__close {
				margin: 0;
				right: 0;
				position: absolute;
				top: 0;
			}

			.button.shoutbox__undo {
				display: none;
				margin-top: -0.8rem;
				opacity: 0;
				transition: opacity 1000ms 10ms ease-in-out;
			}
			.button.shoutbox__undo.shoutbox__undo--show1 {
				display: inline-block;
			}
			.button.shoutbox__undo.shoutbox__undo--show2 {
				opacity: 1;
			}

			.shoutbox--loud a:not([class]) {
				color: rgb(var(--basalt));
			}



/* Chart JS */

.chart {
	position: relative;
}
	.chart canvas {
		position: absolute;
	}

.no-js .chart {
	display: none;
}
.js .chart__table {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}



/* Percentage bar */

	:root {
		--chart-border: rgba(var(--basalt), 0.5);
	}
	.theme--light {
		--chart-border: rgba(var(--basalt), 0.5);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--chart-border: rgba(255,255,255, 0.3);
		}
	}
	.theme--dark {
		--chart-border: rgba(255,255,255, 0.3);
	}

	.percentage-bar {
		border: solid 1px var(--chart-border);
		border-radius: var(--button-radius);
		height: 8px;
		position: relative;
	}
		.percentage-bar__progress {
			background: rgb(var(--tango));
			height: 100%;
			left: 0;
			position: absolute;
		}
		


/* Buttons and Links */

	:root {
		--link-color: var(--smurf);
		--link-color-focus: 255,255,255;
		--card-callout-grey-link: rgb(255,255,255);
	}
	.theme--light {
		--link-color: var(--smurf);
		--link-color-focus: 255,255,255;
		--card-callout-grey-link: rgb(255,255,255);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--link-color: 5,152,214;
			--link-color-focus: var(--onyx);
			--card-callout-grey-link: rgb(var(--basalt));
		}
	}
	.theme--dark {
		--link-color: 5,152,214;
		--link-color-focus: var(--onyx);
		--card-callout-grey-link: rgb(var(--basalt));
	}

	/* Make life easier an only style links that have no assigned class. */
	a:not([class]) {
		color: rgb(var(--link-color));
		text-decoration: underline;
		outline: 0;
		padding: 0.2rem 0.1rem;
	}
	a:hover:not([class]) {
		opacity: 0.9;
		text-decoration: none;
	}
	a:focus:not([class]), 
	a:focus-visible:not([class]) {
		background: rgb(var(--link-color));
		border-radius: 2px;
		color: rgb(var(--link-color-focus));
		text-decoration: none;
	}
	a:focus:not(:focus-visible):not([class]) {
		background: none;
		border-radius: 0;
		color: rgb(var(--link-color));
		text-decoration: underline;
	}


	.page__sidebar a:not([class]) {
		color: rgb(var(--smurf));
	}
	.page__sidebar a:focus:not([class]) {
		color: rgb(var(--midnight));
	}

	/* Callout card links. */
	.card--callout--tango a:not([class]) {
		color: rgb(var(--coal));
	}
	.card--callout--tango a:focus:not([class]), 
	.card--callout--tango a:focus-visible:not([class]) {
		background: rgb(var(--basalt));
		color: rgb(255,255,255);
	}
	.card--callout--tango a:focus:not(:focus-visible):not([class]) {
		background: none;
		color: rgb(var(--coal));
	}

	.card--callout--blue a:not([class]) {
		color: rgb(255,255,255);
	}
	.card--callout--blue a:focus:not([class]), 
	.card--callout--blue a:focus-visible:not([class]) {
		background: rgb(255,255,255);
		color: rgb(var(--smurf));
	}
	.card--callout--blue a:focus:not(:focus-visible):not([class]) {
		background: none;
		color: rgb(255,255,255);
	}

	.card--callout--grey a:not([class]) {
		color: currentColor;
	}
	.card--callout--grey a:focus:not([class]), 
	.card--callout--grey a:focus-visible:not([class]) {
		background: rgb(var(--page-text));
		color: var(--card-callout-grey-link);
	}
	.card--callout--grey a:focus:not(:focus-visible):not([class]) {
		background: none;
		color: currentColor;
	}

	/* Display external icon on links that have no class set whilst also having a target="_blank". */
	a[target='_blank']:not([class]):after,
	.button[target='_blank']:not(.button--small):after,
	.button--small[target='_blank'] .button__text:after,
	a.menu__content[target='_blank'] .menu__text:after {
		color: currentColor;
		content: '\279C';
		display: inline-block;
		font-size: 0.7em;
		line-height: 0.1em;
		margin-left: 0.2em;
		transform: rotate(-45deg);
		vertical-align: super;
	}



/* Buttons */

	:root {
		/* 30% smurf over midnight. */
		--button-bk: rgb(0,76,108);

		/* 40% smurf over midnight. */
		--button-bk-hover: rgb(0,86,123);

		--button-ghost-text: var(--button-bk);

		--button-shadow: var(--basalt);
		
		--popup-button-bk: var(--button-bk);
		--popup-button-text: rgb(255,255,255);
		--popup-button-bk-hover: var(--button-bk-hover);
	}
	.theme--light {
		--button-ghost-text: var(--button-bk);
		--popup-button-bk: var(--button-bk);
		--popup-button-text: rgb(255,255,255);
		--popup-button-bk-hover: var(--button-bk-hover);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--button-ghost-text: rgb(255,255,255);
			--popup-button-bk: rgb(255,255,255);
			--popup-button-text: var(--button-bk);
			--popup-button-bk-hover: rgba(255,255,255,0.9);
		}
	}
	.theme--dark {
		--button-ghost-text: rgb(255,255,255);
		--popup-button-bk: rgb(255,255,255);
		--popup-button-text: var(--button-bk);
		--popup-button-bk-hover: rgba(255,255,255,0.9);
	}

	/* Styles that are used on all buttons. */
	.button {
		background: transparent;
		border: none;
		direction: ltr;
		display: inline-block;
		font-family: inherit;
		font-size: 100%;
		font-weight: 400;
		line-height: inherit;
		outline: 0;
		text-align: center;
		text-decoration: none;
	}

	/* Corner radiuses. */
	.button:not(.button--small), 
	.button--small .button__text {
		border-radius: var(--button-radius);
	}

	/* Don't let JS use the inner part of the buttons as the click target. */
	.button .button__text {
		pointer-events: none;
	}



	/* BUTTON PADDING */

	/* Normal sized buttons. */
	.button:not(.button--small):not(.button--text) {
		padding: 0.8rem 2rem;
	}
	/* Links with button spacing. */
	.button--text {
		padding: 0.8rem 0.1rem;
	}
	/* Buttons that open in new tabs or windows. */
	.button:not(.button--small):not(.button--text)[target="_blank"][target="_blank"] {
		/* Adjust the right padding by roughly the width of the arrow. */
		padding-right: 1.2rem;
	}
	/* Small buttons. */
	.button--small {
		/* Adds some hidden padding to these buttons so that the hit state is still 40px tall. */
		padding: 0.6rem 0;
	}
		.button--small .button__text {
			display: inline-block;
			/* The remainder of the padding that we've adjusted on the button--small. */
			padding: 0.2rem 0.8rem;
		}
	


	/* BUTTON SPACING */

	/* If we need a button to be wrapped in a form it will break the button spacing as it's the first item in the form but not visually the first button in a group. */
	.button__container {
		display: inline-block;
	}

	/* Horizontal margins. */
	.button, 
	.button__container .button {
		margin: 0 calc((var(--gutter) /2) - 2px);
	}
	.button--small, 
	.button__container .button--small {
		margin: 0 calc((var(--gutter) /4) - 2px);
	}

	/* Remove margin on first and last buttons in a group. */
	:not(.button__container) > .button:first-child, 
	.button__container:first-child .button:first-child {
		margin-left: 0;
	}
	:not(.button__container) > .button:last-child, 
	.button__container:last-child .button:last-child {
		margin-right: 0;
	}



	/* BACKGROUNDS, BORDERS AND TEXT */

	/* Solid blue buttons. */
	.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear), 
	.button--small:not(.button--ghost) .button__text {
		background: var(--button-bk);
		box-shadow: 0 1px 0 0 rgba(var(--button-shadow), 0.3);
		color: rgb(255,255,255);
	}
	.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover, 
	.button--small:not(.button--ghost):hover .button__text {
		background: var(--button-bk-hover);
		box-shadow: none;
	}

	/* Solid white buttons: most status blocks, table header. */
	/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
	.status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear), 
	.status:not(.status--whisper) .button--small:not(.button--ghost) .button__text,
	/* TODO: Table header buttons - once buttons--light added to cloud we can remove these two lines. */
	.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear), 
	.table th .button--small:not(.button--ghost) .button__text,

	.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear), 
	.buttons--light .button--small:not(.button--ghost) .button__text {
		background: rgb(255,255,255);
		color: var(--button-bk);
	}
	/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
	.status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover, 
	.status:not(.status--whisper) .button--small:not(.button--ghost):hover .button__text,
	/* TODO: Table header buttons - once buttons--light added to cloud we can remove these two lines. */
	.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover, 
	.table th .button--small:not(.button--ghost):hover .button__text,

	.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover, 
	.buttons--light .button--small:not(.button--ghost):hover .button__text {
		background: rgba(255,255,255,0.9);
	}

	/* Solid blue buttons on light theme popup. */
	.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear) {
		background: var(--popup-button-bk);
		color: var(--popup-button-text);
	}
	.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
		background: var(--popup-button-bk-hover);
		box-shadow: none;
	}

	/* Ghost buttons, all sizes, all themes. */
	.button--ghost:not(.button--small), 
	.button--ghost.button--small .button__text {
		box-shadow: 0 0 0 1px var(--button-bk) inset;
		color: var(--button-ghost-text);
	}
	.button--ghost:not(.button--small):hover, 
	.button--ghost.button--small:hover .button__text {
		box-shadow: 0 0 0 2px var(--button-bk-hover) inset;
	}

	/* Always white buttons, used in table headers and most status boxes. */
	.buttons--light .button--ghost:not(.button--small), 
	.buttons--light .button--ghost.button--small .button__text, 
	/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
	.status:not(.status--whisper) .button--ghost:not(.button--small), 
	.status:not(.status--whisper) .button--ghost.button--small .button__text, 
	/* Table header buttons - once buttons--light added to cloud we can remove these two lines. */
	.table th .button--ghost:not(.button--small), 
	.table th .button--ghost.button--small .button__text {
		box-shadow: 0 0 0 1px rgb(255,255,255) inset;
		color: rgb(255,255,255);
	}
	.buttons--light .button--ghost:not(.button--small):hover, 
	.buttons--light .button--ghost.button--small:hover .button__text, 
	/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
	.status:not(.status--whisper) .button--ghost:not(.button--small):hover, 
	.status:not(.status--whisper) .button--ghost.button--small:hover .button__text, 
	/* Table header buttons - once buttons--light added to cloud we can remove these two lines. */
	.table th .button--ghost:not(.button--small):hover, 
	.table th .button--ghost.button--small:hover .button__text {
		box-shadow: 0 0 0 2px rgb(255,255,255) inset;
	}

	/* Ghost buttons on light theme popup. */
	.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear) {
		box-shadow: 0 0 0 1px var(--popup-button-bk) inset;
		color: var(--popup-button-bk);
	}
	.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear):hover {
		box-shadow: 0 0 0 2px var(--popup-button-bk) inset;
	}

	/* Links with button spacing. */
	.button--text:not(.button--small),
	.button--plain:not(.button--small) {
		color: rgb(var(--link-color));
		text-decoration: underline;
	}
	.button--text:not(.button--small):hover,
	.button--plain:not(.button--small):hover {
		text-decoration: none;
	}

	/*  */
	.button--plain {
		display: inline;
		/* padding: 0.2rem 0.1rem; */
		padding: 0 0.1rem;
	}

	/* Clear buttons. */
	.button--clear {
		color: currentColor;
	}
	.button--clear:hover {
		opacity: 0.9;
	}

	/* Large buttons with adjusted layout. */
	.button.button--large .icon {
		display: block;
		height: 4.8rem;
		margin: auto auto 0.8rem auto;
		width: 4.8rem;
	}
	.button.button--large .icon + .button__text {
		margin-left: 0;
	}



	/* ALL FOCUS STATES */
	
	.button:not(.button--small):focus,
	.button:not(.button--small):focus-visible,
	.button--small:focus .button__text, 
	.button--small:focus-visible .button__text {
		box-shadow: 0 0 0 4px rgb(var(--smurf)) !important;
	}
	.button:not(.button--small):not(.button--ghost):focus:not(:focus-visible), 
	.button--small:not(.button--ghost):focus:not(:focus-visible) .button__text {
		box-shadow: none !important;
	}
	.button--ghost:not(.button--small):focus:not(:focus-visible), 
	.button--small.button--ghost:focus:not(:focus-visible) .button__text {
		box-shadow: 0 0 0 1px var(--popup-button-bk) inset !important;
	}
	.button--plain:focus, 
	.button--plain:focus-visible {
		background: rgb(var(--link-color));
		border-radius: 2px;
		color: rgb(var(--link-color-focus));
		text-decoration: none;
	}



	.button--plain {
		background: none !important;
		box-shadow: none !important;
		color: rgb(var(--link-color)) !important;
		display: inline;
		padding: 0 0.1rem !important;
		text-decoration: underline;
	}
	.button--plain:hover {
		opacity: .9;
		text-decoration: none;
	}
	.button--plain:focus, 
	.button.button--plain:focus-visible {
		background: rgb(var(--link-color)) !important;
		border-radius: 2px;
		box-shadow: none !important;
		color: rgb(var(--link-color-focus)) !important;
		text-decoration: none;
	}
	.buttons--light .button--plain {
		color: rgb(255,255,255) !important;
	}
	.buttons--light .button--plain:focus, 
	.buttons--light .button.button--plain:focus-visible {
		background: rgb(255,255,255) !important;
		color: rgb(var(--coal)) !important;
	}
/* Toggle Button */

	/* This is a fallback to fix the flash of the web component that happens before the JS has time to run. We create a simple animation that will run after a delay of 5 soconds. If JS loads then the animation is sidestepped because the component with its JS added class is set to full visibility. */
	@keyframes view {
		0% { visibility: hidden; }
		100% { visibility: visible; }
	}

	/* Set the not yet setup WC to not display. */
	blinky-toggle-button {
		visibility: hidden;
	}
	/* After 5 seconds run the animation to make the WC visible, only if the WC contains the fallback `a` tag because buttons do nothing without JS to run them. */
	blinky-toggle-button:has(a) {
		/* duration, delay, fill-mode, iteration, name. */
		animation: 0s 5s forwards 1 view;
	}
	/* Make the WC visible once it's been setup in JS. */
	blinky-toggle-button.js__button--toggle {
		visibility: visible;
	}


	.js__button--toggle[toggled='1'] .toggle__0,
	.js__button--toggle[toggled='0'] .toggle__1 {
		display: none;
	}
		.js__button--toggle .toggle__text {
			display: inline-block;
			margin-left: 0.4rem;
		}



/* Menu */

	:root {
		--menu: var(--smurf);
		--menu-shadow: var(--onyx);
		--menu-text: 255,255,255;
		/* Midnight with a 30% black tint to meet a11y contrast. */
		--menu-current-text: 0,31,43;
	}



	.menu {
		position: relative;
	}
	/* .page__sidebar .menu {
		margin: calc(var(--padding) * 2) calc(-1 * var(--padding));
		width: calc(100% + (var(--padding)*2));
	}
	.page__sidebar .menu:first-child {
		margin-top: 0;
	}
	.page__sidebar .menu:last-child {
		margin-bottom: 0;
	} */

	.menu__group {
		text-align: left;
	}



	/* Gutters. */
	.scroll .menu {
		margin-top: 0;
		margin-bottom: 0;
	}

	.table .menu.menu--vertical.menu--dropdown {
		display: inline-flex;
		margin: 0 calc((var(--gutter)/ 2) - 2px);
	}
	.table .menu.menu--vertical.menu--dropdown:first-child {
		margin-left: 0;
	}
	.table .menu.menu--vertical.menu--dropdown:last-child {
		margin-right: 0;
	}



		.menu__title {
			padding: 0 var(--padding);
		}
			.menu__title small {
				font-weight: normal;
			}



		/* If the JavaScript hasn't loaded yet we don't want there to be any weird flashes of submenus. */
		.menu:not(.js__menu):not([data-menu-behaviour="open"]) .menu__item .menu__group, 
		.menu:not(.js__menu) > .menu__main-toggle + .menu__group {
			clip: rect(0 0 0 0);
			clip-path: inset(100%);
			height: 1px;
			overflow: hidden;
			position: absolute;
			white-space: nowrap;
			width: 1px;
		}



		/* Hide / show the submenu group immediately following the parent toggle. */
		.menu [aria-expanded=false] ~ .menu__group {
			display: none;
		}
		.menu [aria-expanded=true] ~ .menu__group {
			display: block;
		}
		.menu--horizontal > [aria-expanded=true] ~ .menu__group {
			display: inline-flex;
		}



		/* Horizontal menus need the top-most group to be horizontal. */
		.menu--horizontal > .menu__group {
			display: inline-flex;
			flex-wrap: nowrap;
		}
		/* Second level, this is the UL that needs to be stacked under the main item. */
		.menu--horizontal > .menu__group > .menu__item > .menu__group {
			box-shadow: 0px 1px 2px 0px rgba(var(--menu-shadow),0.5);
			position: absolute;
			z-index: 5;
		}
		/* Shift horizontal sub groups left if they overshoot the edge of the window. */
		.menu__group--boundary + .menu__group {
			right: 0;
		}

		/* Vertical menus that are dropdowns need to not push content down on their open state. */
		.menu--vertical .menu__main-toggle + .menu__group {
			position: absolute;
			top: 100%;
			z-index: 3;

			/* Apply the radius to the container to properly mask the shadow. */
			border-radius: 0 0 var(--button-radius) var(--button-radius);
			box-shadow: 0px 1px 2px 0px rgba(var(--menu-shadow),0.5);
		}
		.menu--vertical.menu--toggle-right .menu__main-toggle + .menu__group {
			right: 0;
		}

		/* Sets the width on horizontal dropdowns and vertical ones the are popup 
		   menus rather than in content flow. */
		.menu--vertical .menu__main-toggle + .menu__group, 
		.menu--horizontal > .menu__group > .menu__item > .menu__group {
			width: 15em;
		}
		/* Position the main menu above the main toggle as a "jump up". */
		.menu--jump-up .menu__main-toggle + .menu__group {
			top: auto;
			bottom: 100%;
			z-index: 1;
		}



			.menu__item {
				position: relative;
			}
			/* Display inline vertical jump up menus upwards, we position the "dropdowns" but flex the inline version. Could probably tidy this into one style later on. */
			.menu--jump-up > .menu__group > .menu__item {
				display: flex;
				flex-direction: column-reverse;
			}



				/* This is either an A or an H tag. */
				.menu__content {
					background: 
						linear-gradient(
							rgba(var(--menu), 0.3), 
							rgba(var(--menu), 0.3)),
						rgb(var(--midnight));
					color: rgb(var(--menu-text));
					display: flex;
					/* padding: 0.8rem 2rem; */
					padding: 0.8rem var(--padding);
					text-decoration: none;
				}
				/* Second level. */
				.menu__group .menu__group .menu__content {
					background: 
						linear-gradient(
							/* rgba(var(--menu), 0.2),  */
							/* rgba(var(--menu), 0.2)), */
							rgba(var(--menu), 0.25), 
							rgba(var(--menu), 0.25)),
						rgb(var(--midnight));
				}
				/* Third level. */
				.menu__group .menu__group .menu__group .menu__content {
					background: 
						linear-gradient(
							/* rgba(var(--menu), 0.1),  */
							/* rgba(var(--menu), 0.1)), */
							rgba(var(--menu), 0.2), 
							rgba(var(--menu), 0.2)),
						rgb(var(--midnight));
				}
				.menu__content:not(a):not(button) {
					font-weight: 700;
				}
				/* Because the sidebar can have toggles that aren't links we need to specify them as buttons. */
				.menu--button {
					border: none;
					font-family: inherit;
					font-size: inherit;
					line-height: inherit;
					text-align: left;
					width: 100%;
				}



				/* Corner radiuses. */

				/* Vertical menu radius. */
				.menu--vertical > .menu__group > li:first-child {
					border-radius: var(--button-radius) var(--button-radius) 0 0;
					overflow: hidden;
				}
				.menu--vertical > .menu__group > li:last-child {
					border-radius: 0 0 var(--button-radius) var(--button-radius);
					overflow: hidden;
				}
				/* If this is the only item. */
				.menu--vertical > .menu__group > li:first-child:last-child {
					border-radius: var(--button-radius);
				}
				.menu--vertical:not(.menu--toggle-right) > [aria-expanded=true] + .menu__group {
					border-top-left-radius: 0;
				}
				.menu--vertical.menu--toggle-right > [aria-expanded=true] + .menu__group {
					border-top-right-radius: 0;
				}

				.page__sidebar .menu--vertical > .menu__group > li:first-child, 
				.page__sidebar .menu--vertical > .menu__group > li:last-child {
					border-radius: 0;
				}
				.menu--vertical.menu--jump-up > .menu__group > li:last-child {
					border-bottom-left-radius: 0;
				}
				/* Can't overflow hidden because it kills the submenu visibility, so 
				   we add the radius to the first and last menu items, and the 
				   submenus using the vertical styling as above. */
				.menu--horizontal > .menu__group > .menu__item:first-child > .menu__content {
					border-radius: var(--button-radius) 0 0 var(--button-radius);
				}
				.menu--horizontal > .menu__group > .menu__item:last-child > .menu__content {
					border-radius: 0 var(--button-radius) var(--button-radius) 0;
				}
				/* Add radius to top corner of horizontal submenu when opened. */
				.menu--horizontal > .menu__group > .menu__item .menu__group {
					border-radius: 0 var(--button-radius) var(--button-radius) var(--button-radius);
					overflow: hidden;
				}
				.menu--horizontal > .menu__group > .menu__item .menu__group--boundary + .menu__group {
					border-radius: var(--button-radius) 0 var(--button-radius) var(--button-radius);
				}
				/* Remove radius on corners for entire menu toggles. */
				.menu--horizontal:not(.menu--toggle-right) > [aria-expanded=true] + .menu__group > .menu__item:first-child > .menu__content {
					border-radius: 0;
				}
				.menu--horizontal.menu--toggle-right > [aria-expanded=true] + .menu__group > .menu__item:last-child > .menu__content {
					border-radius: 0;
				}



				.menu .menu__group .menu__group .menu__content {
					/* White with a 35% smurf overlay. */
					/* color: rgba(166,218,241,1); */
					/* opacity: 0.8; */

					/* Because the text is smaller we increase the vertical padding a little to keep the menu items the same minimum height as the top levels. */
					/* font-size: 1.4rem; */
					/* padding: 0.9rem 2rem 1rem 2rem; */
				}
				.menu .menu__group .menu__group .menu__content > .icon:first-child {
					flex: 0 0 auto;
				}
				/* Third level items. */
				.menu .menu__group .menu__group .menu__group .menu__content {
					/* color: rgba(166,218,241,0.75); */
					/* opacity: 0.7; */
				}

				/* Indents. */
				.menu {
					--indent: 1.2rem;
				}
				/* Level 2 */
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content {
					/* padding-left: 3.2rem; */
					/* padding-left: calc(var(--padding) * 2); */
					padding-left: calc(var(--padding) + var(--indent));
				}
				/* Level 3 */
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content {
					/* padding-left: 4.4rem; */
					/* padding-left: calc(var(--padding) * 3); */
					padding-left: calc(var(--padding) + (var(--indent) * 2));
				}
				/* Level 4 */
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__group .menu__content {
					padding-left: calc(var(--padding) + (var(--indent) * 4));
				}
				/* Level 5 */
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__group .menu__group .menu__content {
					padding-left: calc(var(--padding) + (var(--indent) * 5));
				}
				/* Level 6 */
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__group .menu__group .menu__group .menu__content {
					padding-left: calc(var(--padding) + (var(--indent) * 5));
				}
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content > .icon:first-child {
					/* margin-left: 0.4rem; */
				}
				.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content > .icon:first-child {
					/* margin-left: 1.6rem; */
				}



				/* Only hover and focus on links, not titles. */
				.menu form.menu__content:hover, 
				.menu span.menu__content:hover, 
				.menu a.menu__content:hover {
					background: 
						linear-gradient(
							rgba(var(--menu), 0.4), 
							rgba(var(--menu), 0.4)), 
						rgb(var(--midnight)) !important;
					color: rgb(var(--menu-text)) !important;
				}
				.menu__form-button:focus, 
				.menu a.menu__content:focus, 
				.menu__form-button:focus-visible, 
				.menu a.menu__content:focus-visible {
					box-shadow: inset 0 0 0 4px rgb(var(--link-color));
					outline: 0;
				}
				.menu__form-button:focus:not(:focus-visible), 
				.menu a.menu__content:focus:not(:focus-visible) {
					box-shadow: none;
				}
				.menu__form-button:focus-visible, 
				.menu a.menu__content:focus-visible {
					box-shadow: inset 0 0 0 4px rgb(var(--link-color));
					outline: 0;
				}

				/* Active page link. */
				.menu [aria-current] {
					background: rgb(var(--tango)) !important;
					color: rgb(var(--menu-current-text)) !important;
				}
				.menu .menu__content[aria-current]:hover {
					background: 
						linear-gradient(
							rgba(255,255,255, 0.2), 
							rgba(255,255,255, 0.2)),
						rgb(var(--tango)) !important;
					color: rgb(var(--menu-current-text)) !important;
				}
				.menu[data-menu-type="split"] [aria-current] + .button.menu__split-button {
					color: rgb(var(--menu-current-text));
				}
				.menu__current-parent {
					box-shadow: inset 4px 0px 0px 0px rgb(var(--tango));
				}
				.menu a.menu__content.menu__current-parent:focus, 
				.menu a.menu__content.menu__current-parent:focus-visible {
					box-shadow: inset 4px 0px 0px 0px rgb(var(--tango)), inset 0 0 0 4px rgb(var(--link-color));
				}
				.menu a.menu__content.menu__current-parent:not(:focus-visible) {
					box-shadow: inset 4px 0px 0px 0px rgb(var(--tango));
				}

					.menu__content .icon {
						/* margin: 0.2rem 0.8rem 0 -0.8rem; */
						margin: 0.2rem 0.8rem 0 0;
					}
					.menu__content .icon--nav {
						flex: 0 0 1.6rem;
						margin: 0.2rem -0.8rem 0 2rem;
						transition: transform 0.2s;
					}
					.menu [aria-expanded="true"] .icon--nav {
						transform: rotate(90deg);
					}
					.menu.menu--jump-up > .menu__group > .menu__item > .menu__content[aria-expanded="true"] .icon--nav, 
					.menu.menu--jump-up > .menu__group > .menu__item > .menu__content + [aria-expanded="true"] .icon--nav {
						transform: rotate(-90deg);
					}

					.menu .icon.icon--av {
						border-radius: var(--button-radius);
						height: 3.2rem;
						margin-bottom: -0.8rem;
						margin-left: -1.6rem;
						margin-top: -0.8rem;

						/* This fixes an issue where the default CSS for images is forcing a menu button to wrap on Safari. */
						max-width: 3.2rem;

						width: 3.2rem;
					}
					.menu.menu--vertical .icon.icon--av {
						margin-top: -0.6rem;
					}
					.menu__spacer {
						width: 1.6rem;
					}
					/* Make the text take up as much room as it can so it pushes the arrow to the right edge. */
					.menu__content .menu__text {
						flex: 1 1 auto;
					}

				.menu--clone {
					font-style: italic;
				}

	/* Main toggle button alignment. Also add this to vertical dropdowns, this is so the .menu isn't a block item that meanswe can't close menus because we might actually still be clicking on them. */
	.menu--horizontal, 
	.menu.menu--vertical.menu--dropdown {
		display: flex;
	}
	.menu--horizontal.menu--toggle-right {
		flex-direction: row-reverse;
	}
	.menu--vertical {
		flex-direction: column;
	}
	
	.menu.menu--vertical.menu--dropdown.menu--inline {
		display: inline-flex;
	}

		/* Toggle button, is otherwise a standard button HTML. */
		.menu .menu__main-toggle {
			margin: 0;
			align-self: flex-start;
		}
		.table .menu .menu__main-toggle {
			white-space: nowrap;
		}
		.menu .menu__main-toggle[aria-expanded="true"] {
			background: 
				linear-gradient(
					rgba(var(--menu), 0.3), 
					rgba(var(--menu), 0.3)),
				rgb(var(--midnight));
		}
		.menu .menu__main-toggle[aria-expanded="true"]:hover {
			background: 
				linear-gradient(
					rgba(var(--menu), 0.4), 
					rgba(var(--menu), 0.4)),
				rgb(var(--midnight));
		}
		/* Align the button right. */
		.menu.menu--toggle-right .menu__main-toggle {
			align-self: flex-end;
		}
		/* This is to make the shadow on the menu appear behind the main toggle button. */
		.menu--jump-up .menu__main-toggle {
			z-index: 2;
		}

			.menu__main-toggle .icon {
				transition: transform 0.2s;
			}
			.menu__main-toggle[aria-expanded="true"] .icon:not(.icon--av) {
				transform: rotate(90deg);
			}
			.menu__main-toggle[aria-expanded="true"] .icon.s180 {
				transform: rotate(180deg);
			}
			.menu__main-toggle .icon.icon--av {
				opacity: 0.75;
			}
			.menu__main-toggle[aria-expanded="true"] .icon.icon--av {
				opacity: 1;
			}

		/* Adjust the radius on the menus when the main toggle is open. */
		.menu--horizontal .menu__main-toggle[aria-expanded="true"] {
			border-radius: var(--button-radius) 0 0 var(--button-radius);
		}
		.menu--horizontal.menu--toggle-right .menu__main-toggle[aria-expanded="true"] {
			border-radius: 0 var(--button-radius) var(--button-radius) 0;
		}
		.menu--vertical .menu__main-toggle[aria-expanded="true"] {
			border-radius: var(--button-radius) var(--button-radius) 0 0;
		}
		.menu--vertical:not(.menu--toggle-right):not(.menu--jump-up) .menu__main-toggle[aria-expanded="true"] + .menu__group > .menu__item:first-child {
			border-top-left-radius: 0;
		}
		.menu--vertical.menu--toggle-right .menu__main-toggle[aria-expanded="true"] + .menu__group > .menu__item:first-child {
			border-top-right-radius: 0;
		}
		.menu--jump-up .menu__main-toggle[aria-expanded="true"] {
			border-radius: 0 0 var(--button-radius) var(--button-radius);
		}

		.table .menu .menu__main-toggle {
			padding: 0.2rem 1.4rem !important;
		}
		.table .menu .menu__main-toggle .button__text {
			margin-left: 1.2rem;
			margin-right: -0.4rem;
		}

		/* Addition for adding form posts with buttons to the menu. */
		form.menu__content,
		span.menu__content {
			padding: 0;
		}
		.menu__form-button {
			background: transparent;
			border: none;
			color: rgb(var(--menu-text));
			display: flex;
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
			/* padding: 0.8rem 2rem; */
			padding: 0.8rem var(--padding);
			text-align: left;
			width: 100%;
		}
		.menu__group .menu__group .menu__form-button {
			padding-left: 0;
		}



/* Adjustments for menu split buttons.  */
.menu[data-menu-type=split] .menu__item > .menu__content {
	padding-right: 4.8rem;
}
	.menu[data-menu-type=split] .menu__item > .menu__split-button {
		background: rgba(var(--smurf), 0.2);
		margin: 0;
		position: absolute;
		top: 0.4rem;
		right: 0.4rem;
		padding: 0.4rem 1.6rem;
	}
	.menu[data-menu-type=split] .menu__item > .menu__split-button:not(:hover) {
			background: rgba(255,255,255,0.075) !important;
			/* background: none !important; */
	}
	.menu[data-menu-type=split] .menu__item > .menu__split-button:hover {
			background: rgba(255,255,255,0.125) !important;
	}
	.menu--jump-up[data-menu-type=split] .menu__item > .menu__split-button {
		bottom: 0.4rem;
		top: auto;
	}
	.menu[data-menu-type=split] .menu__item > .menu__split-button:hover {
		background: rgba(var(--smurf), 0.5);
	}
		.menu[data-menu-type=split] .menu__item > .menu__split-button .icon {
			transition: transform 0.2s;
		}

	.menu[data-menu-type=split] .menu__item > [aria-current] + .menu__split-button {
		background: rgba(255,255,255, 0.2);
	}
	.menu[data-menu-type=split] .menu__item > [aria-current] + .menu__split-button:hover {
		background: rgba(255,255,255, 0.5);
	}



/* Filter Menu. */

	.filter-menu {
		display: inline-block;
		position: relative;
	}
	.js__filter-menu nav {
		display: flex;
		gap: calc(var(--padding) / 4);
	}
		.filter-menu__text {
			padding-top: 0.8rem;
		}
		.filter-menu__col {
			align-self: baseline;
		}
			.filter-menu .filter-menu__current {
				margin: 0;
			}
			/* Kill the bottom button radius if the menu is open. */
			.filter-menu[expanded="1"] .filter-menu__current {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

				/* Animation for toggle button icon. */
				.js__filter-menu .icon {
					transition: transform .2s;
				}
				.js__filter-menu [aria-expanded="true"] .icon {
					transform: rotate(90deg);
				}

	/* If the .threshold-not-met has been added we hide the filter. */
	.js__filter-menu.threshold-not-met .filter-menu__label {
		display: none;
	}
	.js__filter-menu .filter-menu__hide {
		display: none;
	}
	.js__filter-menu b {
		color: rgb(var(--tango));
	}

	/* List that gets shown / hidden if the toggle button is clicked / hovered / focussed-within. */
	.filter-menu__list {
		border-radius: var(--button-radius);
		display: none;
		overflow: hidden;
		position: absolute;
		min-width: 100%;
	}
	.js__filter-menu .filter-menu__list {
		background:
			linear-gradient(
				rgba(var(--menu), 0.3),
				rgba(var(--menu), 0.3)),
			rgb(var(--midnight));
		color: rgb(var(--menu-text));
		padding: calc(var(--padding) / 2) 0;
	}
		/* Only available on nonJS version. */
		.filter-menu__skip {
			clip: rect(1px,1px,1px,1px);
			width: 1px;
			height: 1px;
			overflow: hidden;
			position: absolute;
		}
		.filter-menu__skip:focus {
			clip: auto;
			width: auto;
			height: auto;
			position: initial;
		}
		.filter-menu__list .nav__group {
			max-height: calc(100vh - 9em);
			overflow: auto;
		}
		/* Add some spacing if the list has at least one item visible. */
		.js__filter-menu .nav__group:has(.nav__item:not(.filter-menu__hide)) {
			margin-top: calc(var(--padding) / 2);
		}
		/* Message that's shown if the user filtered away all the items. */
		.js__filter-menu .nav__group:has(.nav__item:not(.filter-menu__hide)) ~ .filter-menu__nothing {
			display: none;
		}
		.js__filter-menu .filter-menu__nothing {
			display: block;
			font-style: italic;
			padding: .8rem var(--padding);
			text-align: center;
			text-wrap: balance;
		}

	/* Remove the corner radius of whatever corner needs to be removed
	to match the edge of the toggle button and align the list. */
	.filter-menu:not(.filter-menu--right) .filter-menu__list {
		border-top-left-radius: 0;
	}
	.filter-menu--right .filter-menu__list {
		border-top-right-radius: 0;
		right: 0;
	}

	/* NonJS interaction on hover and focus-within. */
	.filter-menu:hover:not(.js__filter-menu) .filter-menu__list,
	.filter-menu:not(.js__filter-menu):focus-within .filter-menu__list,
	/* JS interaction on the toggled aria value. */
	.filter-menu [aria-expanded='true'] ~ .filter-menu__list {
		display: block;
	}

		/* Filter. */
		.js__filter-menu .filter-menu__label {
			align-items: center;
			background: rgba(var(--smurf), 0.3);
			border-radius: var(--button-radius);
			display: flex;
			margin: 0 calc(var(--padding) / 2);
			overflow: hidden;
			padding: calc(var(--padding) / 2);
			position: relative;
		}
			.js__filter-menu .filter-menu__span {
				flex: 1 0 auto;
				white-space: nowrap;
			}
			.js__filter-menu .filter-menu__filter {
				color: rgb(var(--page-text));
				flex: 1 1 auto;
				margin-left: calc(var(--padding) / 2);
			}
			.js__filter-menu .filter-menu__clear {
				position: absolute;
				right: 1.2rem;
			}

			/* We only need this on the nonJS because if a UL has no class set it displays as default with a bullet. */
			.filter-menu:not(.js__filter-menu) ul {
				list-style-type: none;
				margin: 0;
			}
				/* List link styles. */
				.filter-menu:not(.js__filter-menu) a,
				.js__filter-menu .nav__content {
					background:
						linear-gradient(
							rgba(var(--menu), 0.3),
							rgba(var(--menu), 0.3)),
						rgb(var(--midnight));
					color: rgb(var(--menu-text));
					display: block;
					padding: 0.8rem var(--padding);
					text-decoration: none;
				}
				.filter-menu:not(.js__filter-menu) a:hover,
				.js__filter-menu a.nav__content:hover {
					background:
						linear-gradient(
							rgba(var(--menu), 0.4),
							rgba(var(--menu), 0.4)),
						rgb(var(--midnight)) !important;
					color: rgb(var(--menu-text)) !important;
				}
				.filter-menu:not(.js__filter-menu) a:focus,
				.filter-menu:not(.js__filter-menu) a:focus-visible,
				.js__filter-menu a.nav__content:focus,
				.js__filter-menu a.nav__content:focus-visible {
					box-shadow: inset 0 0 0 4px rgb(var(--link-color));
					outline: 0;
				}
				.filter-menu:not(.js__filter-menu) a:focus:not(:focus-visible),
				.js__filter-menu a.nav__content:focus:not(:focus-visible) {
					box-shadow: none;
				}
/* Breadcrumb trail */

	.breadcrumb li {
		display: inline;
	}
	/* Don't use a unicode character in the content attribute as some screen readers 
	   now read out text added via CSS, instead create an arrow using the border trick. */
	.breadcrumb li + li:before {
		border: 0.4rem solid transparent;
		border-left: 0.5rem solid rgba(var(--page-text), 0.85);
		content: '';
		display: inline-block;
		margin: 0 0 0.1rem 0.2rem;
	}
		/* Keep this generic so we can use an aria-current value of page or location. */
		.breadcrumb [aria-current] {
			color: inherit;
			text-decoration: none;
		}



/* Form container */

	:root {
		--form-background: rgb(var(--concrete));
		--form-footer-border: rgba(var(--basalt),0.7);
		--form-section-footer: var(--concrete);
	}
	.theme--light {
		--form-background: rgb(var(--concrete));
		--form-footer-border: rgba(var(--basalt),0.7);
		--form-section-footer: var(--concrete);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-background: rgba(var(--jet), 1);
			--form-footer-border: rgba(255,255,255,0.8);
			--form-section-footer: var(--jet);
		}
	}
	.theme--dark {
		--form-background: rgba(var(--jet), 1);
		--form-footer-border: rgba(255,255,255,0.8);
		--form-section-footer: var(--jet);
	}


	.form {
		background: var(--form-background);
		border-radius: var(--block-radius);
		padding: var(--padding);
		/* Add 25% extra padding to the bottom to visually balance things out. */
		padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
	}
	.form--horizontal--old {
		align-items: flex-end;
		display: flex;
		padding-bottom: var(--padding);
	}

		.form__row {
			position: relative;
		}
		.form__row ~ .form__row {
			margin: var(--gutter) 0 0 0;
		}
		.form--horizontal--old .form__row {
			flex: 1 1 auto;
			flex-flow: row wrap;
			margin: 0 calc(var(--gutter) / 2);
		}

		.form__row--footer {
			text-align: center;
		}
		/* .form:not(.form--horizontal--old) .form__row--footer:before { */
		.form__row--footer:before {
			background: var(--form-footer-border);
			border-radius: 1px;
			content: '';
			display: block;
			height: 2px;
			margin-bottom: calc(var(--gutter) + 2px);
			opacity: 0.2;
		}
		/* Sets to content width. */
		.form--horizontal--old .form__row--footer {
			flex: 0 0 auto;
		}

		 /* This was something to do with the first input submitting the form. */
		.form__row--footer--rtl {
			direction: rtl;
		}


		.form--sections {
			align-items: flex-start;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			padding-bottom: 0;
			position: relative;

			/* This is used to offset to account for sticky headers, by default it's switched off. */
			--scroll-margin-top: 0;
		}
			.form--sections .form__section-list {
				flex: 0 1 18em;
				padding: 0 calc(var(--gutter) * 1.5) var(--gutter) 0;
				position: sticky;
				top: 0;
				top: var(--scroll-margin-top);
			}
			.form--sections .form__section-content {
				flex: 1 1 30em;
			}
				.form--sections .fieldset {
					scroll-margin-top: var(--scroll-margin-top);
				}
				.form--sections__menu-anchor {
					clip: rect(0 0 0 0);
					clip-path: inset(100%);
					height: 1px;
					overflow: hidden;
					/* Add some padding since we're using overflow hidden so we don't cut off the focus style. */
					padding: 4px;
					position: absolute;
					white-space: nowrap;
					width: 1px;
				}

			@media only screen and (max-width: 75rem) {
				.form--sections {
					display: block;
				}
					.form--sections .form__section-list {
						flex: 1 1 18em;
						padding-right: 0;
						position: static;
					}
						.form--sections__menu-anchor {
							clip: auto;
							clip-path: none;
							height: auto;
							overflow: hidden;
							position: static;
							white-space: normal;
							width: auto;
						}
			}

				.form--sections .form__row--footer {
					bottom: 0;
					background: linear-gradient(
						180deg, 
						rgba(var(--form-section-footer),0) 0, 
						rgba(var(--form-section-footer),1) 1.2rem, 
						rgba(var(--form-section-footer),1) 0%);
					margin-left: calc((var(--gutter) / 2) - var(--gutter) - 2px);
					margin-right: calc((var(--gutter) / 2) - var(--gutter) - 2px);
					margin-top: 0rem;
					padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
					padding-top: 1.6rem;
					position: sticky;
					z-index: 5;
				}
				/* Because we have to pull the footer out so it covers the form content when the footer is layered above we should reset the divider spacing. */
				.form:not(.form--horizontal).form--sections .form__row--footer:before {
					margin-left: calc((var(--gutter) / 2) + 2px);
					margin-right: calc((var(--gutter) / 2) + 2px);
				}

	/* Horizontal form. */
	.form--horizontal {
		display: flex;
		flex-flow: row wrap;
		gap: var(--gutter);
		justify-content: space-between;
		/* Adjust because on a vertical form the bottom margin is set larger due to optical trickery. */
		padding-bottom: var(--padding);
		padding-top: 0;
	}
		/* Group the fields together and flex them separate fro mthe submit button. */
		.form--horizontal .form__fields {
			display: flex;
			flex: 1 1 20em;
			flex-flow: row wrap;
			justify-content: flex-start;
			/* gap: var(--gutter); */
			column-gap: var(--gutter);
		}
		/* Set the submit area to be no wider than the width of the content. */
		.form--horizontal .form__row--footer {
			flex: 0 1 max-content;
			align-self: flex-end;
		}
		/* Hide the vertical form footer keyline. */
		.form.form--horizontal .form__row--footer:before {
			display: none;
		}

			/* Field group flex settings. */
			/* By default each "row" can stretch or compress and needs to be no smaller than 15em. */
			.form--horizontal .form__fields .form__row {
				flex: 1 1 10em;
				margin-top: 0;
				padding-top: var(--padding);
			}
			.form--horizontal .form__fields fieldset.form__row {
				padding-top: 0;
			}
			.form--horizontal .form__fields.form__horizontal-fields .form__row {
				flex: 1 1 15em;
			}
			/* Make "row" be no wider than its content, e.g. checkboxes because labels don't stretch. */
			.form--horizontal .form__fields .form__row.form__row--content {
				flex: 0 1 max-content;
			}
			/* Make "row" full width of the field group, e.g. a large search box like Cloud logs. */
			.form--horizontal .form__fields .form__row.form__row--full-width {
				flex: 1 1 100%;
			}
			.form__row--br {
				flex-basis: 100%;
				height: 0;
			}

		/* Remove the BR from between checkboxes / radios and set spacing. */
		.form--horizontal .form__radbox ~ br {
			display: none;
		}
		.form--horizontal .form__radbox-label:not(:last-child) {
			padding-right: calc(var(--gutter) / 2);
		}

		/* For nested field groups (fieldsets) we need to adjust their minimum width. */
		.form--horizontal .form__fields .form__fields .form__row {
			flex-basis: 5em;
		}



/* Fieldset */

	:root {
		--form-fieldset: 
			linear-gradient(
				rgba(255,255,255, 0.35), 
				rgba(255,255,255, 0.35)), 
			rgb(var(--concrete));
		--form-fieldset2: 
			linear-gradient(
				rgba(255,255,255, 0.7), 
				rgba(255,255,255, 0.7)), 
			rgb(var(--concrete));
		--form-fieldset3: 
			linear-gradient(
				rgba(255,255,255, 1), 
				rgba(255,255,255, 1)), 
			rgb(var(--concrete));
	}
	.theme--light {
		--form-fieldset: 
			linear-gradient(
				rgba(255,255,255, 0.35), 
				rgba(255,255,255, 0.35)), 
			rgb(var(--concrete));
		--form-fieldset2: 
			linear-gradient(
				rgba(255,255,255, 0.7), 
				rgba(255,255,255, 0.7)), 
			rgb(var(--concrete));
		--form-fieldset3: 
			linear-gradient(
				rgba(255,255,255, 1), 
				rgba(255,255,255, 1)), 
			rgb(var(--concrete));
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-fieldset: 
				linear-gradient(
					rgba(255,255,255, 0.035), 
					rgba(255,255,255, 0.035)), 
				rgb(var(--jet));
			--form-fieldset2: 
				linear-gradient(
					rgba(255,255,255, 0.07), 
					rgba(255,255,255, 0.07)), 
				rgb(var(--jet));
			--form-fieldset3: 
				linear-gradient(
					rgba(255,255,255, 0.15), 
					rgba(255,255,255, 0.15)), 
				rgb(var(--jet));
		}
	}
	.theme--dark {
		--form-fieldset: 
			linear-gradient(
				rgba(255,255,255, 0.035), 
				rgba(255,255,255, 0.035)), 
			rgb(var(--jet));
		--form-fieldset2: 
			linear-gradient(
				rgba(255,255,255, 0.07), 
				rgba(255,255,255, 0.07)), 
			rgb(var(--jet));
		--form-fieldset3: 
			linear-gradient(
				rgba(255,255,255, 0.15), 
				rgba(255,255,255, 0.15)), 
			rgb(var(--jet));
	}



	.form .fieldset.form__row {
		background: var(--form-fieldset);
		border-radius: var(--button-radius);
		padding: 0 calc(var(--gutter) / 2) 1.6rem calc(var(--gutter) / 2);
		position: relative;
	}
	.form .fieldset .fieldset.form__row {
		background: var(--form-fieldset2);
	}
	.form .fieldset .fieldset .fieldset.form__row {
		background: var(--form-fieldset3);
	}
	.form.form--horizontal > .fieldset {
		margin-top: -1rem;
		margin-bottom: -1rem;
	}
	.form.form--horizontal .fieldset .fieldset {
		margin-top: 1rem;
	}
	.form:not(.form--horizontal) .fieldset.form__row {
		margin-left: calc((var(--gutter) / 2) - var(--gutter));
		margin-right: calc((var(--gutter) / 2) - var(--gutter));
	}
	.form:not(.form--horizontal) .fieldset .fieldset.form__row {
		margin-left: 0;
		margin-right: 0;
	}
	.form.form--horizontal .fieldset .fieldset, 
	.form.form--horizontal .fieldset.form__row .form__row {
		display: inline-block;
	}
		.form .fieldset.form__row legend {
			background: var(--form-fieldset);
			border-radius: var(--button-radius);
			padding: calc(var(--padding) / 4) var(--padding) 0 var(--padding);
			margin-bottom: 1.6rem;
			margin-top: 0;
		}
		.form.form--horizontal .fieldset.form__row legend {
			font-size: 1.6rem;
			padding: 0 calc(var(--padding) / 2);
		}

		/* Native legends are tricky to style consistently as they do not get rendered as an item inside a fieldset. We need them for accessibility but we can then hide them (in an accessible way using .visually-hidden and then replicating the content of the legend into an element that's then hidden from the accessibility tree by using aria-hidden="true". This aria-hidden="true" element is what will be displayed for sighted users whilst still having the correct element in place for screen readers. Ideally, it would be nice to switch the order in the HTML so we could make use of the sibling selector but the legend has to be the first element inside the fieldset. */
		.form legend.visually-hidden + .legend {
			margin-top: 1rem;
		}
		

	.fieldset--active {
		box-shadow: 0 0 0 2px rgb(var(--link-color));
	}
		.fieldset--active legend {
			box-shadow: 0 -2px 0 0 rgb(var(--link-color));
		}

	/* If using horizontal field layout make sure to take fieldsets out of the grid. */
	@container form-horizontal-fields (min-width: 40em) {
		@supports(display: contents) {
			.form__horizontal-fields .fieldset.form__row {
				display: unset;
				grid-column: 1 / span 2;
			}
		}
	}
		

		
/* Step Through Form */

	:root {
		--step-line: rgba(var(--basalt), 0.2);
	}
	.form--step-through {
		/* This is used to offset to account for sticky headers, by default it's switched off. */
		--scroll-margin-top: 0;
	}

	.form--step-through .form__step__button,
	.form--step-through .form__step__icon,
	.form--step-through .form__row--step {
		display: none;
	}

	.form--step-through-css .form__step {
		padding-bottom: 3.2rem;
		padding-left: 2.8rem;
		margin-left: 1.2rem;
		margin-right: 4.4rem;

		/* Because it's a pain to do lookbacks in JS we set the default step style to 'completed'. */
		border-left: solid 2px var(--step-line);
		border-left-style: dashed;
		position: relative;

		scroll-margin-top: var(--scroll-margin-top);
	}
	
	.form--step-through-css .form__step--completed {
		border-left-style: solid;
	}
	/* Class is added with JS as there's no nice way to do this in pure CSS. */
	.form--step-through-css .form__step--last {
		border-left-color: transparent;
		padding-bottom: var(--gutter);
	}
	.form__step:not(.form__step--active):not(.form__step--completed) {
		padding-bottom: calc(var(--gutter) / 2);
	}
	.form__step:not(.form__step--active):not(.form__step--completed) .h3 {
		font-size: 1em;
		padding-top: 0.4rem;
	}

		.form--step-through-css .form__step legend.visually-hidden + .legend {
			margin-top: 0;
		}
		/* This forces the row to clear the floated legend. */
		.form--step-through-css .form__step .form__row {
			clear: both;
		}

			/* Icons */
			.form__step .form__step__icon {
				border-radius: var(--button-radius);
				display: block;
				position: absolute;
				left: -1.3rem;
				padding: 0.4rem;
				top: 0.4rem;
				transform: rotate(45deg);
			}
				.form__step .form__step__icon .icon {
					transform: rotate(-45deg);
					display: block;
					top: 0;
				}
					.form__step .form__step__icon .icon--dot, 
					.form__step .form__step__icon .icon--dot-outline, 
					.form__step .form__step__icon .icon--tick {
						display: none;
					}

			.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon {
				background: rgb(255,255,255);
			}
				.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon {
					fill: rgba(var(--basalt), 0.5);
				}
					.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon--dot-outline {
						display: block;
					}

			.form__step--active .form__step__icon {
				background: rgb(var(--tango));
			}
				.form__step--active .form__step__icon .icon {
					fill: rgb(var(--basalt));
				}
					.form__step--active:not(.form__step--completed) .form__step__icon .icon--dot {
						display: block;
					}

			.form__step--completed .form__step__icon {
				background: rgb(var(--midnight));
			}
				.form__step--completed .form__step__icon .icon {
					fill: rgb(255,255,255);
				}
					.form__step--completed .form__step__icon .icon--tick {
						display: block;
					}


			.form--step-through-css .form__step .form__step_p {
				margin-bottom: 1.6rem;
			}

			/* It's easier to hide/show the icons like this rather than with JavaScript, the tradeoff is that we need to add all of the icons to the page. */
			.form--step-through-css .form__step .form__step_p {
				display: none;
			}
			.form--step-through-css .form__step legend, 
			.form--step-through-css .form__step--active .form__step_p {
				display: block;
			}

			/* Hide the previous fields and only show the active ones. */
			.form--step-through--hide-fields.form--step-through-css .form__step .form__row {
				display: none;
			}
			.form--step-through--hide-fields.form--step-through-css .form__step--active .form__row {
				display: block;
			}


			.form--step-through-css .form__step .button.form__step__button {
				display: none;
			}
		.form--step-through-css .form__step--active .form__row {
			display: block;
		}
			.form--step-through-css .form__step--active .button.form__step__button {
				display: inline-block;
			}

		.form--step-through-css .form__step:not(.form__step--active):not(.form__step--completed) .form__row {
			display: none;
		}
		.form--step-through-css .form__step--active .form__row {
			display: block;
		}


		.form--step-through-css .form__step--todo .form__row {
			display: none;
		}

		.form--step-through-css .form__row--step {
			display: block;
			margin: calc(var(--gutter) * 2) 0 0 0;
			text-align: center;
		}

		.form__step__noproceedmsg {
			display: none;
		}
		.form__step__noproceedmsg[role=alert] {
			display: block;
			margin-bottom: 1.6rem;
		}
			.form__step__noproceedmsg .icon {
				fill: rgb(var(--form-error));
			}



/* Form Steps */

	:root {
		--form-step-line: rgba(var(--basalt), 0.2);
		--form-step-icon-complete-bk: rgb(var(--midnight));
		--form-step-icon-incomplete-bk: rgb(255,255,255);
		--form-step-icon-incomplete-fill: rgba(var(--basalt), 0.5);
	}
	.theme--light {
		--form-step-line: rgba(var(--basalt), 0.2);
		--form-step-icon-complete-bk: rgb(var(--midnight));
		--form-step-icon-incomplete-bk: rgb(255,255,255);
		--form-step-icon-incomplete-fill: rgba(var(--basalt), 0.5);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-step-line: rgba(255,255,255, 0.2);
			--form-step-icon-complete-bk: rgb(var(--smurf));
			--form-step-icon-incomplete-bk: rgb(var(--basalt));
			--form-step-icon-incomplete-fill: rgba(255,255,255, 0.5);
		}
	}
	.theme--dark {
		--form-step-line: rgba(255,255,255, 0.2);
		--form-step-icon-complete-bk: rgb(var(--smurf));
		--form-step-icon-incomplete-bk: rgb(var(--basalt));
		--form-step-icon-incomplete-fill: rgba(255,255,255, 0.5);
	}

	.form-steps {
		/* This is used to offset to account for sticky headers, by default it's switched off. */
		--scroll-margin-top: 0;
	}

			.form-steps__icon, 
			.form-steps__controls, 
			.form-steps .form-steps__controls .button {
				display: none;
			}
			.form__row--footer.form-steps__controls {
				display: block;
			}
				.form__row--footer.form-steps__controls .button:not(.form__step__button):not(.form__step__button-back) {
					display: inline-block;
				}

		.js__form-steps .form-steps__step {
			padding-bottom: 3.2rem;
			padding-left: 2.8rem;
			margin-left: 1.2rem;
			margin-right: 4.4rem;
			border-left: solid 2px var(--form-step-line);
			border-left-style: dashed;
			position: relative;
			scroll-margin-top: var(--scroll-margin-top);
		}
		/* Reduce the spacing between fieldsets when hide previous fields is active. */
		.js__form-steps.form-steps--hide-previous-fields .form-steps__step {
			padding-bottom: var(--gutter);
		}
		.js__form-steps .form-steps__step--complete {
			border-left-style: solid;
		}
		.js__form-steps .form-steps__step--last {
			border-left-color: transparent;
			padding-bottom: var(--gutter);
		}
			.js__form-steps .form-steps__step--complete .legend, 
			.js__form-steps .form-steps__step--incomplete .legend {
				font-size: 1.6rem;
				padding-top: 0.4rem;
			}
			
			.js__form-steps .form-steps__fields {
				display: grid;
				grid-template-rows: 1fr;
				transition: visibility 0.03s ease-in-out, grid-template-rows 0.3s ease-in-out 0.03s;
				visibility: visible;
			}

			/* We wrap the content we want to hide (fields, paragrahs) in .form-steps__fields 
			   so that we can animate a single element to hide/show. */

			/* Hide all elements after the icon in incomplete steps. */
			.js__form-steps .form-steps__step--incomplete .form-steps__fields, 
			/* Hide completed steps if this option is set in the HTML. */
			.js__form-steps.form-steps--hide-previous-fields .form-steps__step--complete .form-steps__fields {
				grid-template-rows: 0fr;
				transition: grid-template-rows 0.3s ease-in-out, visibility 0.03s ease-in-out 0.3s;
				visibility: hidden;
			}
				.js__form-steps .form-steps__inner {
					overflow: hidden;
					/* Overflow cuts off the 4px focus on fields so we give the field container a 4px padding and pull things back into line with a 4px negative margin. */
					margin: -4px;
					padding: 4px;
				}

			.js__form-steps legend.visually-hidden + .legend {
				margin-top: 0;
			}
			.js__form-steps .form-steps__title a {
				color: currentColor;
				text-decoration: none;
			}
			.js__form-steps .form-steps__title a:hover {
				text-decoration: underline;
			}
				/* Don't let JS listen to any clicks on markup inside the title links. */
				.js__form-steps .form-steps__title a * {
					pointer-events: none;
				}

			.js__form-steps .form-steps__icon {
				border-radius: var(--button-radius);
				display: block;
				position: absolute;
				left: -1.3rem;
				padding: 0.4rem;
				top: 0.4rem;
				transform: rotate(45deg);
			}
				.js__form-steps .form-steps__icon .icon {
					transform: rotate(-45deg);
					display: block;
					top: 0;
				}
					.js__form-steps .form-steps__icon use {
						display: none;
					}

					/* Completed */
					.js__form-steps .form-steps__step--complete .form-steps__icon {
						background: var(--form-step-icon-complete-bk);
						fill: rgb(255,255,255);
					}
					/* Active */
					.js__form-steps .form-steps__step--active .form-steps__icon {
						background: rgb(var(--tango));
						fill: rgb(var(--basalt));
					}
					/* Incompleted */
					.js__form-steps .form-steps__step--incomplete .form-steps__icon {
						background: var(--form-step-icon-incomplete-bk);
						fill: var(--form-step-icon-incomplete-fill);
					}
						/* Icon glyphs */
						.js__form-steps .form-steps__step--complete .icon--tick, 
						.js__form-steps .form-steps__step--active .icon--dot, 
						.js__form-steps .form-steps__step--incomplete .icon--dot-outline {
							display: block;
						}

			.js__form-steps .form-steps__controls {
				display: none;
			}
			.js__form-steps .form-steps__step--active .form-steps__controls {
				display: block;
				margin: calc(var(--gutter) * 2) 0 0 0;
				text-align: center;
			}
				/* Display buttons if they have href attributes or they are in the footer and not an a without an href. */
				.js__form-steps .form-steps__controls .button[href], 
				.js__form-steps .form__row--footer .button:not(a) {
					display: inline-block;
				}



		.form-steps__error {
			display: none;
		}
		.js__form-steps .form-steps__error[role=alert] {
			display: block;
			margin-bottom: 1.6rem;
		}
			.js__form-steps .form-steps__error .icon {
				fill: rgb(var(--form-error));
			}



/* Field container */

	:root {
		--form-help: rgba(var(--basalt), 0.7);
	}
	.theme--light {
		--form-help: rgba(var(--basalt), 0.7);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-help: rgba(255,255,255, 0.25);
		}
	}
	.theme--dark {
		--form-help: rgba(255,255,255, 0.25);
	}



	.form__horizontal-fields {
		container-type: inline-size;
		container-name: form-horizontal-fields;
	}
		.form__horizontal-fields__inner {
			margin-bottom: var(--gutter);
		}
	@container form-horizontal-fields (min-width: 40em) {
		@supports(display: contents) {
			.form__horizontal-fields .form__horizontal-fields__inner {
				display: grid;
				grid-template-columns: minmax(0, max-content) minmax(50%, 1fr);
				gap: var(--gutter);
			}
			.form__horizontal-fields .form__row {
				display: contents;
			}
		}
			.form--horizontal .form__horizontal-fields .form__row {
				display: flex;
				align-items: center;
				gap: calc(var(--gutter) / 2);
			}
				.form--horizontal .form__horizontal-fields .form__row .form__label {
					flex: 0 1 max-content;
					white-space: nowrap;
					margin-bottom: 0;
				}
				.form--horizontal .form__horizontal-fields .form__row .form__field {
					flex: 1 1 auto;
				}
	}



	/* Label. */
	.form__label {
		display: block;
		font-weight: 500;
		margin-bottom: 0.4rem;
		position: relative;
	}
		.form__required {
			font-size: 1.1rem;
			font-weight: bold;
			vertical-align: super;
		}

		@container form-horizontal-fields (min-width: 40em) {
			@supports(display: contents) {
				.form__horizontal-fields .form__label {
					padding-top: 0.4rem;
				}
			}
		}


	/* Error messages */
	.form__error {
		/* We hide this completely rather than use accessible hide to hide it 
			from screen readers. */
		display: none;
		font-size: 1.4rem;
		margin-top: 0.4rem;
	}
	[aria-invalid="true"] ~ .form__error,
	.form__error--show {
		display: block;
	}
	.form__error .icon {
		fill: rgb(var(--form-error));
	}
/* Help Text */

	:root {
		--help-bk: rgba(var(--basalt), 0.7);
	}
	.theme--light {
		--help-bk: rgba(var(--basalt), 0.7);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--help-bk: rgba(255,255,255, 0.25);
		}
	}
	.theme--dark,
	.table th {
		--help-bk: rgba(255,255,255, 0.25);
	}

	@keyframes show-help-text {
		0% {
			visibility: hidden;
		}
		100% {
			visibility: visible;
		}
	}
	blinky-help-text {
		visibility: hidden;
	}
	blinky-help-text {
		animation: 0s 1s forwards 1 show-help-text;
	}
	blinky-help-text.js__help-text {
		visibility: visible;
	}

	/* NonJS styling */
	blinky-help-text:not(.js__help-text) {
		display: block;
	}
	/* Fixes an issue where the BR doubles up when we have a display block too. */
	.help-text[expanded='1'] + br,
	blinky-help-text:not(.js__help-text) + br {
		display: none;
	}

		.button.help-text__toggle {
			background: none !important;
			box-shadow: none !important;
			margin: -1.2rem -1.6rem 0 0;
			padding: 0.8rem 1.6rem !important;
		}

		/* Clear the outer button focus styles. */
		.button.help-text__toggle:hover {
			background: none;
		}
		.button.help-text__toggle:focus {
			box-shadow: none !important;
		}
			.help-text__toggle-icon {
				background: var(--help-bk);
				border-radius: var(--button-radius);
				display: block;
				height: 1.6rem;
				margin: 0 0 0 -1.6rem;
				pointer-events: none;
				position: relative;
				top: 0.4rem;
				transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 0.5);
				width: 1.6rem;
			}
			
			/* The toggled button state. */
			.button.help-text__toggle[aria-expanded="1"] .help-text__toggle-icon {
				transform: rotate(-45deg);
			}
				.button.help-text__toggle[aria-expanded="1"] .icon {
					transform: rotate(45deg);
				}

			/* Focus state of toggle button. */
			.button.help-text__toggle:focus .help-text__toggle-icon, 
			.button.help-text__toggle:focus-visible .help-text__toggle-icon {
				box-shadow: 0 0 0 4px rgb(var(--smurf));
			}
			.button.help-text__toggle:focus:not(:focus-visible) .help-text__toggle-icon {
				box-shadow: none;
			}
				.help-text__toggle-icon .icon {
					fill: rgb(255,255,255);
					padding: 0.2rem;
					pointer-events: none;
					top: 0;
					transition: inherit;
					vertical-align: top;
				}
				/* Fix for icons in popups overruling the fill above. */
				body .help-text__toggle-icon .icon {
					fill: rgb(255,255,255) !important;
				}

		.help-text__content,
		/* Provide fallback nonJS styling. */
		blinky-help-text:not(.js__help-text) {
			background: var(--help-bk);
			border-radius: var(--button-radius);
			color: rgb(255,255,255);
			font-weight: normal;
			margin-bottom: 0.8rem;
			margin-top: 0.4rem;
			padding: 0.4rem 0.8rem;
		}
		.js__help-text .help-text__content {
			display: none;
		}
		.js__help-text[expanded='1'] .help-text__content {
			display: block;
		}
			.help-text__content a:not([class]) {
				color: rgb(255,255,255);
			}

	@container form-horizontal-fields (min-width: 40em) {
		@supports(display: contents) {
			.form__horizontal-fields .button.help-text__toggle {
				/* Because it's no longer positioned it dickers with the margin, tweak it to match. */
				margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) calc((var(--gutter) / 2) - 0.6rem) !important;

				/* Reduce the size of the button. */
				padding: 0 1.4rem 2.4rem 2rem;
			}
		}
	}



/* Inline fields */

	.form__inline {
		margin-right: 0.8rem;
		width: auto !important;
	}



/* Single line input */

	:root {
		--form-error: var(--cherry);
		--form-field-background: rgb(255,255,255);
		--form-field-border: rgba(var(--basalt),0.7);
		--form-field-border-hover: rgba(var(--basalt),0.5);

		--form-field-background-dark: 
			linear-gradient(
				rgba(255,255,255, 0.15), 
				rgba(255,255,255, 0.15)), 
			rgb(var(--coal));
		--form-field-border-dark: rgba(255,255,255,0.4);
		--form-field-border-hover-dark: rgba(255,255,255,0.2);
	}
	.theme--light {
		--form-error: var(--cherry);
		--form-field-background: rgb(255,255,255);
		--form-field-border: rgba(var(--basalt),0.7);
		--form-field-border-hover: rgba(var(--basalt),0.5);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-error: var(--cherry);
			--form-field-background: var(--form-field-background-dark);
			--form-field-border: var(--form-field-border-dark);
			--form-field-border-hover: var(--form-field-border-hover-dark);
		}
	}
	.theme--dark {
		--form-error: var(--cherry);
		--form-field-background: var(--form-field-background-dark);
		--form-field-border: var(--form-field-border-dark);
		--form-field-border-hover: var(--form-field-border-hover-dark);
	}


	/* Text field */
	.form__text, 
	.form input[type=text], 
	.form input[type=date], 
	.form input[type=email], 
	.form input[type=number], 
	.form input[type=password], 
	.form input[type=search], 
	.form input[type=tel], 
	.form input[type=url] {
		background: var(--form-field-background);
		border: solid 1px var(--form-field-border);
		border-radius: var(--button-radius);
		color: inherit;
		display: inline-block;
		/* We deduct 1px to account for the border width. */
		padding: 0.7rem;
		width: 100%;
	}
	.form__text:hover, 
	.form input[type=text]:hover, 
	.form input[type=date]:hover, 
	.form input[type=email]:hover, 
	.form input[type=number]:hover, 
	.form input[type=password]:hover, 
	.form input[type=search]:hover, 
	.form input[type=tel]:hover, 
	.form input[type=url]:hover {
		border-color: var(--form-field-border-hover);
	}
	.form__text:focus, 
	.form input[type=text]:focus, 
	.form input[type=date]:focus, 
	.form input[type=email]:focus, 
	.form input[type=number]:focus, 
	.form input[type=password]:focus, 
	.form input[type=search]:focus, 
	.form input[type=tel]:focus, 
	.form input[type=url]:focus {
		border-color: rgba(255,255,255, 0);
		box-shadow: 0 0 0 4px rgb(var(--link-color));
	}
	.form__text[aria-invalid="true"], 
	.form input[type=text][aria-invalid="true"], 
	.form input[type=date][aria-invalid="true"], 
	.form input[type=email][aria-invalid="true"], 
	.form input[type=number][aria-invalid="true"], 
	.form input[type=password][aria-invalid="true"], 
	.form input[type=search][aria-invalid="true"], 
	.form input[type=tel][aria-invalid="true"], 
	.form input[type=url][aria-invalid="true"] {
		border-color: rgb(255,255,255, 0);
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}
	.form__text[aria-invalid="true"]:focus, 
	.form input[type=text][aria-invalid="true"]:focus, 
	.form input[type=date][aria-invalid="true"]:focus, 
	.form input[type=email][aria-invalid="true"]:focus, 
	.form input[type=number][aria-invalid="true"]:focus, 
	.form input[type=password][aria-invalid="true"]:focus, 
	.form input[type=search][aria-invalid="true"]:focus, 
	.form input[type=tel][aria-invalid="true"]:focus, 
	.form input[type=url][aria-invalid="true"]:focus {
		border-color: rgb(255,255,255);
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}

	.form__text--large {
		max-width: 50rem;
	}
	.form__text--medium {
		max-width: 25rem;
	}
	.form__text--small {
		max-width: 14rem;
	}
	.form__text--tiny {
		max-width: 6rem;
	}



/* Multi-suggest on textfield */

.form__multilist {
	display: block;
	position: relative;
}
	.form__select.multilist__list {
		display: none;
		min-width: 100%;
		overflow-y: auto;
		position: absolute;
		scrollbar-width: none; /* Firefox */
		z-index: 1;
	}
	.js .form__multilist:focus-within .multilist__list {
		display: block;
	}
	.multilist__list--empty {
		display: none !important;
	}
	.multilist__list .hide {
		display: none;
	}



/* Output */

	:root {
		--output-border: rgba(var(--basalt),0.2);
		--output-opacity: 0.75;
	}
	.theme--light {
		--output-border: rgba(var(--basalt),0.2);
		--output-opacity: 0.75;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--output-border: rgba(255,255,255,0.15);
			--output-opacity: 0.5;
		}
	}
	.theme--dark {
		--output-border: rgba(255,255,255,0.15);
		--output-opacity: 0.5;
	}


	.form__pfix--output .form__pfix__text {
		background: var(--output-border);
		color: currentColor;
	}
	.form__pfix--output .form__pfix__text .icon {
		fill: currentColor;
		opacity: var(--output-opacity);
	}
	.form__output {
		border: solid 1px var(--output-border);
		border-radius: var(--button-radius);
		color: inherit;
		display: inline-block;
		/* We deduct 1px to account for the border width. */
		padding: 0.7rem;
		cursor: not-allowed;
	}



/* Obfuscated field */

	:root {
		/* This is the spacing needed if we use the default icon only toggle, if we want to show the toggle label then
		   this value will need to be set directly on the form__obfuscated element. */
		--obfuscated-padding: 4rem;
	}

	blinky-obfuscated-field {
		display: block;
	}
	.js__form__obfuscated {
		position: relative;
	}
		/* Need slightly more specifity to force this past the default .form__text settings. */
		.js__form__obfuscated input.form__text {
			padding-right: var(--obfuscated-padding);
		}
		.js__form__obfuscated .form__obfuscated__toggle {
			display: inline-block;
			position: absolute;
			right: 0.4rem;
		}



/* Textarea */

	/* Uses the CSS variables from single line inputs. */

	.form__textarea {
		background: var(--form-field-background);
		border: solid 1px var(--form-field-border);
		border-radius: var(--button-radius);
		color: inherit;
		display: inline-block;
		/* We deduct 1px to account for the border width. */
		padding: 0.7rem;
		width: 100%;
	}
	.form__textarea:hover {
		border-color: var(--form-field-border-hover);
	}
	.form__textarea:focus {
		border-color: rgba(255,255,255, 0);
		box-shadow: 0 0 0 4px rgb(var(--link-color));
	}
	.form__textarea[aria-invalid="true"] {
		border-color: rgb(255,255,255, 0);
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}
	.form__textarea[aria-invalid="true"]:focus {
		border-color: rgb(255,255,255);
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}



/* Prefixed small amount of text to form inputs. Assumes that the .form__prefix has only two children: the prefix and the field. */

	:root {
		--form-pfix-text: rgb(255,255,255);
		--form-pfix-warning: var(--basalt);
	}
	.theme--light {
		--form-pfix-text: rgb(255,255,255);
		--form-pfix-warning: var(--basalt);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-pfix-text: rgb(var(--coal));
			--form-pfix-warning: var(--basalt);
		}
	}
	.theme--dark {
		--form-pfix-text: rgb(var(--coal));
		--form-pfix-warning: var(--basalt);
	}

	/* TODO: once form__prefix is swapped in Cloud remove this duplicate class. */

	.form__prefix, 
	.form__pfix {
		display: flex;
	}
		.form__prefix__text, 
		.form__pfix__text {
			background: var(--form-field-border);
			border-radius: var(--button-radius) 0 0 var(--button-radius);
			color: var(--form-pfix-text);
			padding: 0.8rem;
		}
		.form__prefix__text + *:not(:focus):not([aria-invalid="true"]), 
		.form__pfix__text + *:not(:focus):not([aria-invalid="true"]) {
			border-radius: 0 var(--button-radius) var(--button-radius) 0;
		}
		.form__prefix--radbox .form__prefix__text, 
		.form__pfix--radbox .form__pfix__text {
			border-radius: var(--button-radius);
			margin: 0.3rem 0.8rem 0.3rem 0;
			padding: 0.1rem 0.4rem;
		}

		/* pfix text positioning for postfix. */
		.form__pfix--postfix .form__pfix__text {
			border-radius: 0 var(--button-radius) var(--button-radius) 0;
			order: 1;
		}
		.form__pfix--postfix .form__pfix__text + *:not(:focus):not([aria-invalid="true"]) {
			border-radius: var(--button-radius) 0 0 var(--button-radius);
		}
		.form__pfix--postfix.form__pfix--radbox .form__pfix__text {
			border-radius: var(--button-radius);
			margin-left: 0.8rem;
			margin-right: 0;
		}
		/* Ordering the flex items causes the text to appear behind the input, this is apparent when the input is focussed or showing the error style. */
		.form__pfix--postfix .form__pfix__text ~ * {
			z-index: 1;
		}

		.form__pfix--warning:not(.form__pfix--postfix) .form__pfix__text + * {
			border-left-color: rgb(var(--tango)) !important;
		}
		.form__pfix--warning.form__pfix--postfix .form__pfix__text + * {
			border-right-color: rgb(var(--tango)) !important;
		}

		.form__pfix--warning .form__pfix__text {
			background: rgb(var(--tango));
			color: rgb(var(--form-pfix-warning));
		}
		.form__pfix--warning:not(.form__pfix--radbox) .form__pfix__text {
			border: 1px solid var(--form-field-border);
		}
		.form__pfix--warning:not(.form__pfix--postfix):not(.form__pfix--radbox) .form__pfix__text {
			border-right: none;
		}
		.form__pfix--warning.form__pfix--postfix:not(.form__pfix--radbox) .form__pfix__text {
			border-left: none;
		}

	.form__pfix:has([aria-invalid="true"]) ~ .form__error {
		display: block;
	}


	
/* Checkbox */

	.form__radbox {
		background: none;
		opacity: 0.00001;
		position: absolute;
	}
	.form__radbox + .form__radbox-label, 
	.form__large-radios .form__radbox ~ .form__large-radios__content .form__radbox-label {
		cursor: pointer;
		display: inline-block;
		min-height: 2.6rem;
		padding: 0.4rem 0 0.4rem 3.4rem;
		position: relative;
	}
	.form__radbox + .form__radbox-label:before, 
	.form__large-radios .form__radbox ~ .form__large-radios__content .form__radbox-label:before {
		background: var(--form-field-background);
		border: solid 1px var(--form-field-border);
		border-radius: var(--button-radius);
		content: '';
		height: 2.6rem;
		position: absolute;
		left: 0;
		width: 2.6rem;
	}
	.form__radbox[type="checkbox"]:checked + .form__radbox-label:after, 
	.form__large-radios .form__radbox[type="checkbox"]:checked ~ .form__large-radios__content .form__radbox-label:after {
		border: 0.3rem solid rgb(var(--page-text));
		border-top: 0;
		border-left: 0;
		content: '';
		height: 1.2rem;
		left: 1rem;
		position: absolute;
		width: 0.7rem;
		top: 0.9rem;
		transform: rotate(40deg);
	}

	/* TODO: add style for radio checked. */

	.form__radbox:hover + label:before {
		border-color: var(--form-field-border-hover);
	}

	.form__radbox:focus + label:before, 
	.form__radbox:focus-visible + label:before {
		border-color: rgba(255,255,255, 0);
		box-shadow: 0 0 0 4px rgb(var(--link-color));
	}
	.form__radbox:focus:not(:focus-visible) + label:before {
		border-color: var(--form-field-border);
		box-shadow: none;
	}

	.form__radbox[aria-invalid="true"] + label:before {
		border-color: rgb(255,255,255, 0);
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}

	.form__radbox[aria-invalid="true"]:focus + label:before, 
	.form__radbox[aria-invalid="true"]:focus-visible + label:before {
		border-color: rgb(255,255,255);
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}
	.form__radbox[aria-invalid="true"]:focus:not(:focus-visible) + label:before {
		border-color: rgb(255,255,255, 0);
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}

	/* Disabled. */
	.form__radbox[disabled="disabled"] + .form__radbox-label:before, 
	.form__large-radios .form__radbox[disabled="disabled"] ~ .form__large-radios__content .form__radbox-label:before {
		opacity: 0.5;
	}
	.form__radbox[disabled="disabled"] + .form__radbox-label:after, 
	.form__large-radios .form__radbox[disabled="disabled"] ~ .form__large-radios__content .form__radbox-label:after {
		border-right: solid 1px var(--form-field-border);
		content: '';
		height: 3.67rem;
		left: 1.2rem;
		position: absolute;
		width: 0.1rem;
		top: -0.1rem;
		transform: rotate(45deg);
		opacity: 0.5;
	}
	.form__radbox[disabled="disabled"] + .form__radbox-label, 
	.form__large-radios .form__radbox[disabled="disabled"] ~ .form__large-radios__content .form__radbox-label {
		cursor: not-allowed;
	}


	.form__radbox-label .form__help-toggle {
		top: -0.4rem;
	}
	.form__radbox-label.form__help-text--open ~ .form__help-text {
		margin-bottom: 0;
	}
	.form__radbox-label ~ .form__help-text + br {
		display: none;
	}


	
/* Radio button */

	.form__radbox[type="radio"] + .form__radbox-label:before, 
	.form__large-radios .form__radbox[type="radio"] ~ .form__large-radios__content .form__radbox-label:before {
		border-radius: 50%;
	}

	.form__radbox[type="radio"]:checked + .form__radbox-label:after, 
	.form__large-radios .form__radbox[type="radio"]:checked ~ .form__large-radios__content .form__radbox-label:after {
		background: rgb(var(--page-text));
		border-radius: 50%;
		content: '';
		height: 1rem;
		left: 0.8rem;
		position: absolute;
		width: 1rem;
		top: 1.2rem;
	}



/* Large radio group */

	:root {
		--large-radios-min-width: 40rem;

		--large-radios-bk: rgba(var(--basalt), 0.5);
		--large-radios-text: 255,255,255;

		--large-radios-stripe: rgb(var(--tango));
		--large-radios-stripe-disabled: rgba(var(--basalt),0.3);
	}
	.theme--light {
		--large-radios-bk: rgba(var(--basalt), 1);
		--large-radios-text: 255,255,255;
		--large-radios-stripe-disabled: rgba(var(--basalt),0.3);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--large-radios-bk: rgba(var(--concrete), 0.4);
			--large-radios-text: 255,255,255;
			--large-radios-stripe-disabled: rgba(255,255,255,0.15);
		}
	}
	.theme--dark {
		--large-radios-bk: rgba(var(--concrete), 0.4);
		--large-radios-text: 255,255,255;
		--large-radios-stripe-disabled: rgba(255,255,255,0.15);
	}

	.form__large-radios {
		display: grid;
		grid-gap: var(--padding);
		/* This can be overridden with an inline var attached to the main section. */
		grid-template-columns: repeat( auto-fit, minmax(var(--large-radios-min-width), 1fr) );
	}
	.form__large-radios--column {
		grid-template-columns: 1fr !important;
	}
		.form__large-radios__item {
			border: solid 1px var(--form-field-border);
			border-radius: var(--button-radius);
			background: var(--form-field-background);
			color: inherit;
			display: flex;
			padding: var(--padding);
			flex-direction: column;
			justify-content: space-between;
			position: relative;
		}
		/* In a month's time this should be supported in the latest version of Firefox, works in Webkit browsers. */
		.form__large-radios__item:has(.form__radbox[disabled="disabled"]),
		.form__large-radios__item:not(:has(.form__radbox)) {
			opacity: 0.65;
		}
			/* The positionesd to full width/height label that makes everythig clickable, we visually hide its content because positioning pulls it out of alignment. We repeat the label visually later on for sighted users. */
			.form__large-radios__label {
				position: absolute;
				inset: 0;
				z-index: 1;
				cursor: pointer;
			}
			.form__large-radios .form__radbox[disabled="disabled"] + .form__large-radios__label {
				cursor: default;
			}
			.form__large-radios .form__radbox:checked + .form__large-radios__label {
				background: var(--large-radios-bk);
			}

			.form__large-radios .form__radbox:checked ~ .form__large-radios__content, 
			.form__large-radios .form__radbox:checked ~ .form__large-radios__content a {
				color: rgb(var(--large-radios-text));
			}
			
			.form__large-radios__item .form__large-radios__content {
				pointer-events: none;
				position: relative;
				z-index: 2;
			}
			/* Account for radio button spacing. */
			.form__large-radios__item .form__radbox ~ .form__large-radios__content {
				padding-left: 3.4rem;
			}
			.form__large-radios__content + .form__large-radios__content {
				padding-top: var(--padding);
			}
				.form__large-radios__content .form__radbox-label {
					margin-bottom: 0.4em;
				}
				/* Account for radio button spacing. */
				.form__radbox ~ .form__large-radios__content .form__radbox-label {
					margin-left: -3.4rem;
				}

				/* Focus styles for the fake radios. */
				.form__large-radios .form__radbox:focus ~ .form__large-radios__content .form__radbox-label:before, 
				.form__large-radios .form__radbox:focus-visible ~ .form__large-radios__content .form__radbox-label:before {
					border-color: rgba(255,255,255, 0);
					box-shadow: 0 0 0 4px rgb(var(--link-color));
				}
				.form__large-radios .form__radbox:focus:not(:focus-visible) ~ .form__large-radios__content .form__radbox-label:before {
					border-color: var(--form-field-border);
					box-shadow: none;
				}

				/* Make sure to pull any interactive contnet elements in front of the clickable label. */
				.form__large-radios__item a, 
				.form__large-radios__item .button {
					position: relative;
					z-index: 3;
					pointer-events: visible;
				}

				.form__large-radios .highlight-stripe {
					background: var(--large-radios-stripe-disabled);
					margin-left: calc(var(--padding) * -1);
					margin-right: calc(var(--padding) * -1);
					padding: calc(var(--padding) / 2);
				}
				/* If there's a selectable radio button paint the highlight stripe orange. */
				.form__large-radios .form__radbox:not([disabled="disabled"]) ~ .form__large-radios__content .highlight-stripe {
					background: var(--large-radios-stripe);
				}
				/* Account for radio button spacing. */
				.form__large-radios .form__radbox ~ .form__large-radios__content .highlight-stripe {
					margin-left: calc((3.4rem + var(--padding)) * -1);
				}
				.form__large-radios .form__radbox:checked ~ .form__large-radios__content .highlight-stripe {
					color: rgb(var(--page-text));
				}

				.form__large-radios .form__radbox:checked ~ .form__large-radios__content .form__large-radios__tag .icon {
					fill: rgb(255,255,255) !important;
				}


				
/* Select dropdowns */

	:root {
		--form-select-background: 
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%),
			var(--form-field-background);

		/* Setup the dark theme select background in the default because we reuse this in headers and footers where the background is permanently dark. */
		--form-select-background-dark: 
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%),
			linear-gradient(
				rgba(255,255,255, 0.15), 
				rgba(255,255,255, 0.15)), 
			rgb(var(--coal));
	}
	.theme--light {
		--form-select-background: 
			linear-gradient(45deg, transparent 50%, currentColor 50%),
			linear-gradient(135deg, currentColor 50%, transparent 50%),
			var(--form-field-background);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--form-select-background: var(--form-select-background-dark);
		}
	}
	.theme--dark {
		--form-select-background: var(--form-select-background-dark);
	}


	.form__select {
		background: var(--form-field-background);
		border: solid 1px var(--form-field-border);
		border-radius: var(--button-radius);
		color: inherit;
		display: inline-block;
		/* We deduct 1px to account for the border width. */
		padding: 0.7rem 3.2rem 0.7rem 0.7rem;
		width: 100%;
	}
	.form__select--content-width {
		width: auto;
	}
	.form__select:not([multiple]) {
		background: var(--form-select-background);
		background-position:
			calc(100% - 2rem) calc(2rem - 0.2rem),
			calc(100% - 1.5rem) calc(2rem - 0.2rem),
			100% 100%,
			100% 100%;
		background-size:
			0.5rem 0.5rem,
			0.5rem 0.5rem,
			auto,
			auto;
		background-repeat: no-repeat;
	}
	/* Remove the arrow in IE. */
	.form__select::-ms-expand {
		display: none;
	}
	.form__select:hover {
		border-color: var(--form-field-border-hover);
	}
	.form__select:focus {
		border-color: rgba(255,255,255, 0);
		box-shadow: 0 0 0 4px rgb(var(--link-color));
	}
	.form__select[aria-invalid="true"] {
		border-color: rgb(255,255,255);
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}
	.form__select[aria-invalid="true"]:focus {
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}


	.page__header .form__select, 
	.page__footer .form__select {
		background: var(--form-field-background-dark);
		border: solid 1px var(--form-field-border-dark);
		color: inherit;
	}
	.page__header .form__select:hover, 
	.page__footer .form__select:hover {
		border-color: var(--form-field-border-hover-dark);
	}
	.page__header .form__select:not([multiple]), 
	.page__footer .form__select:not([multiple]) {
		background: var(--form-select-background-dark);
		background-position:
			calc(100% - 2rem) calc(2rem - 0.2rem),
			calc(100% - 1.5rem) calc(2rem - 0.2rem),
			100% 100%,
			100% 100%;
		background-size:
			0.5rem 0.5rem,
			0.5rem 0.5rem,
			auto,
			auto;
		background-repeat: no-repeat;
	}


		
/* Switch toggle */

	:root {
		--switch: rgba(var(--basalt),0.5);
		--switch-hover: rgba(var(--basalt),0.4);
		--switch-on: var(--frog);
		--switch-on-alt: 
			linear-gradient(
				0deg,
				rgba(255,255,255,0.25) 0,
				rgba(255,255,255,0.25) 100%
			),
			linear-gradient(
				0deg,
				rgb(var(--frog)) 0,
				rgb(var(--frog)) 100%
			);
	}
	.theme--light {
		--switch: rgba(var(--basalt),0.5);
		--switch-hover: rgba(var(--basalt),0.4);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--switch: rgba(255,255,255,0.3);
			--switch-hover: rgba(255,255,255,0.2);
		}
	}
	.theme--dark {
		--switch: rgba(255,255,255,0.3);
		--switch-hover: rgba(255,255,255,0.2);
	}

	.form__switch {
		background: none;
		border: none;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
		padding: 0.4rem 0 0.4rem 5rem;
		position: relative;
	}
	.form__switch:hover {
		background: none;
	}
	.form__switch:focus {
		box-shadow: none;
	}

	/* Main pill. */
	.form__switch:before {
		background: var(--switch);
		border-radius: 2em;
		content: '';
		height: 2.6rem;
		left: 0;
		position: absolute;
		top: 0.4rem;
		width: 4.2rem;
	}
	/* If there's no BUTTON text it will need a minimum height. */
	.form__switch[aria-labelledby] {
		min-height: 3.2rem;
	}
	.form__switch:hover:before {
		background: var(--switch-hover);
	}
		.form__switch__dot {
			background: var(--page-background);
			border-radius: 2em;
			content: '';
			height: 1.8rem;
			left: 0.4rem;
			pointer-events: none;
			position:absolute;
			top: 0.8rem;
			transform: translateX(0);
			transition: all 0.2s ease-in-out;
			width: 1.8rem;
		}

	.form__switch[aria-pressed="true"]:before {
		background: rgb(var(--switch-on));
	}
	/* .table th .form__switch[aria-pressed="true"]:before {
		background: var(--switch-on-alt);
	} */
		.form__switch[aria-pressed="true"] .form__switch__dot {
			color: rgb(var(--basalt));
			transform: translateX(1.6rem);
		}
		.form__switch[aria-pressed="true"] .form__switch__dot:after {
			border: 0.3rem solid rgb(var(--switch-on));
			border-top: 0;
			border-left: 0;
			content: '';
			height: 1rem;
			left: 0.65rem;
			position: absolute;
			width: 0.6rem;
			top: 0.3rem;
			transform: rotate(40deg);
		}
		
	.form__switch:focus {
		outline: none;
	}
	.form__switch:focus:before, 
	.form__switch:focus-visible:before {
		box-shadow: 0 0 0 4px rgb(var(--smurf));
	}
	.form__switch:focus:not(:focus-visible):before {
		box-shadow: none;
	}

	.form__switch[aria-invalid="true"]:before {
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}
	.form__switch[aria-invalid="true"]:focus:before {
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}



/* Nested Fields */

	blinky-child-fields {
		display: block;
	}
		blinky-child-fields .children {
			/* Uninitiated components will be styled here, a grid by default assumes a column structure. */
			display: grid;
		}
		blinky-child-fields.js__form__child-fields .children {
			grid-template-rows: 0fr;
			transition: grid-template-rows 0.3s ease-in-out, visibility 0.03s ease-in-out 0.3s;
			visibility: hidden;
		}
		blinky-child-fields.js__form__child-fields .children[aria-expanded="true"] {
			grid-template-rows: 1fr;
			transition: visibility 0.03s ease-in-out, grid-template-rows 0.3s ease-in-out 0.03s;
			visibility: visible;
		}
			.js__form__child-fields .form__child-fields__inner {
				overflow: hidden;
				/* We need to shift some spacing focus styles on fields aren't cut off by the lack of overflow. */
				padding: 0 4px 4px 4px;
				margin-bottom: -4px;
			}

		/* Indents the child fields to give visual meaning. */
		.form__child-fields {
			margin-left: calc(3.4rem - 4px);
		}

		/* Because we're hiding the unexpanded fields showing the disabled styling is not helpful, so we clear the
		   styling and also set the text content of single line inputs and textareas to the same colour as the field
	       backgrounds, this is to reinforce to the user that their diabled fields will nt be submitted. */
		.js__form__child-fields .form__radbox[disabled="disabled"] + .form__radbox-label::after {
			display: none;
		}
		.js__form__child-fields .children input[disabled="disabled"],
		.js__form__child-fields .children textarea[disabled="disabled"] {
			color: var(--form-field-background);
		}



/* Linked fieldsets */
	.fieldset-group {
		/* This is used to offset to account for sticky headers, by default it's switched off. */
		--scroll-margin-top: 0;
	}
	.fieldset-group .fieldset {
		scroll-margin-top: var(--scroll-margin-top);
	}

	.form:not(.form--horizontal) .fieldset-group .fieldset.form__row {
		margin-left: 0;
		margin-right: 0;
	}
	
	/* Linked fieldsets */
	.js__fieldset-group .fieldset[aria-expanded=false] {
		display: none;
		/* opacity: 0.5; */
	}
	.js__fieldset-group .fieldset[aria-expanded=true] {
		display: block;
		/* opacity: 1; */
	}



/* File upload */

	:root {
		--file-upload-background: rgb(255,255,255);
		--file-upload-border: rgb(var(--smurf));
	}
	.theme--light {
		--file-upload-background: rgb(255,255,255);
		--file-upload-border: rgb(var(--smurf));
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--file-upload-background: rgb(var(--coal));
			--file-upload-border: rgb(var(--smurf));
		}
	}
	.theme--dark {
		--file-upload-background: rgb(var(--coal));
		--file-upload-border: rgb(var(--smurf));
	}

	/* We only style this if the user has JavaScript enabled. */
	.js .form__file {
		opacity: 0;
		position: absolute;
	}
	.js .form__file__button {
		margin-left: 0.4rem;
		margin-right: 0.4rem;
	}
	.js .form__file__name {
		display: block;
		padding-top: calc(var(--padding) / 4);
	}
		.js .form__file__name span {
			display: block;
		}

	.js .form__file__drag {
		background: var(--file-upload-background);
		border: 1px dashed var(--file-upload-border);
		border-radius: var(--block-radius);
		display: inline-block;
		padding: calc(var(--padding) + 1px);
	}
	.js .form__file__drag-active ~ .form__file__drag {
		border: 2px dashed var(--file-upload-border);
		padding: var(--padding);
	}
	.js .form__file:focus ~ .form__file__drag {
		box-shadow: 0 0 0 4px rgb(var(--smurf));
	}
	.js .form__file[aria-invalid="true"] ~ .form__file__drag {
		box-shadow: 0 0 0 2px rgb(var(--form-error));
	}
	.js .form__file[aria-invalid="true"]:focus ~ .form__file__drag {
		box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
	}
		.js .form__file__drag * {
			pointer-events: none;
		}



/* Loading spinner */
	:root {
		--progress-box: rgba(var(--basalt),0.25);
	}
	.theme--light {
		--progress-box: rgba(var(--basalt),0.25);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--progress-box: rgba(255,255,255,0.2);
		}
	}
	.theme--dark {
		--progress-box: rgba(255,255,255,0.2);
	}

	.progress {
		/* This fixes a bug where if this element is used directly in a flexbox the width could be set to 0. */
		display: block;
		width: 100%;
	}

	.progress__box {
		background: rgba(var(--tango), 1);
		display: block;
		margin: var(--gutter) auto;
		overflow: hidden;
		position: relative;
	}

	.progress__box--circle {
		border-radius: 50%;
		height: 4rem;
		padding: 0.3rem;
		width: 4rem;
	}
		.progress__box--circle .progress__fish,
		.theme--light .progress__box--circle .progress__fish {
			animation: fish-circle 1s linear infinite;
			background: url(../images/loader-circle.svg) no-repeat center center;
			display: block;
			height: 100%;
			width: 100%;
		}
		@keyframes fish-circle {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(-360deg); }
		}

	.progress__box--line {
		border-radius: var(--button-radius);
		height: 1.6rem;
		margin: var(--gutter) auto;
		overflow: hidden;
		width: 100%;
	}

	.progress progress[value] + .progress__box--line {
		background: var(--progress-box);
	}
		.progress__box--line .progress__fish,
		.theme--light .progress__box--line .progress__fish {
			animation: fish-line 0.5s linear infinite;
			background: url(../images/loader-line.svg) repeat left top;
			background-size: 6.7rem 1.6rem;
			bottom: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 200%;
		}
		.progress progress[value] + .progress__box--line .progress__fish {
			background-color: rgba(var(--tango),1) !important;
			right: auto;
			width: 0%;
			left: 0;
			animation: none;
			background-position: right;
			/* This value is set in the JS for each specific element based on the element width. */
			transition: width var(--speed);
		}

.button:has(.progress) {
	position: relative;
}
.button .progress__box--line,
.menu .progress__box--line {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	height: 0.4rem;
	border-bottom-left-radius: 0;
	border-bottom-left-radius: 0;
}
.button .progress__box--line .progress__fish, 
.menu .progress__box--line .progress__fish {
	background: repeating-linear-gradient(
		-45deg,
		rgba(var(--tango),1),
		rgba(var(--tango),1) 25%,
		rgba(255,255,255,0.25) 25%,
		rgba(255,255,255,0.25) 50%,
		rgba(var(--tango),1) 50%,
		rgba(var(--tango),1) 75%,
		rgba(255,255,255,0.25) 75%,
		rgba(255,255,255,0.25) 100%
	);
	background-size: 6.7rem 0.4rem;
}
.button .progress progress[value] + .progress__box--line, 
.menu .progress progress[value] + .progress__box--line {
	background: none;
}
.button .progress__fish, 
.menu .progress__fish {
	animation: fish-line 1s linear infinite;
}

		@keyframes fish-line {
			0% { transform: translateX(0); }
			100% { transform: translateX(6.7rem); }
		}



/* Icons */

	:root {
		--icon-colour: var(--onyx);
	}
	.theme--light {
		--icon-colour: var(--onyx);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--icon-colour: 255,255,255;
		}
	}
	.theme--dark {
		--icon-colour: 255,255,255;
	}



	.icon {
		display: inline-block;
		height: 1.6rem;
		position: relative;
		top: 0.2rem;
		width: 1.6rem;
	}

	/* This will be applies to icons in buttons on their own and with text. */
	.button .icon {
		margin-left: -8px;
		margin-right: -8px;

		/* This is used to tell JS to ignore clicks on the icon and bubble up to the button. */
		pointer-events: none;

		/* top: 0.2rem; */
	}
	.button--small .icon {
		margin-left: 0px;
		margin-right: 3px;
	}
	/* For small icon only buttons. */
	.button--small .button__text .icon {
		margin-left: -0.2rem;
		margin-right: -0.2rem;
	}
	/* Covers historical usage where we have a label on small buttons with icons and text that are not wrapped in a span. */
	.button--small .button__text .icon:last-child {
		margin-right: 0.4rem;
	}
	.button--small .button__text .icon + .button__small-text {
		margin-left: 0.4rem;
	}

	.button .icon + .button__text {
		margin-left: 20px;
	}



	.button .icon, 
	.menu__content .icon {
		fill: currentColor;
	}

	.icon--90deg {
		transform: rotate(90deg);
	}
	.icon--180deg {
		transform: rotate(180deg);
	}
	.icon--270deg {
		transform: rotate(270deg);
	}
	

	
/* Animation */

	.anim--rotate-anticlockwise {
		animation: anim-rotate-anticlockwise 2s linear infinite;
	}
	@keyframes anim-rotate-anticlockwise {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(-360deg); }
	}
	@media (prefers-reduced-motion) {
		.anim {
			animation: none;
		}
	}


	
/* Cloud specific */

	/* Specific styling for the search log form. */
	.form--search-logs.form--horizontal .form__app {
		flex: 1 0 12em;
		min-width: 12em;
	}
	.form--search-logs.form--horizontal .form__date-range {
		flex: 0 0 auto;
	}
	.form--search-logs.form--horizontal .form__date {
		flex: 0 0 9em;
		width: 9em;
	}
			.form--search-logs.form--horizontal fieldset.form__row legend {
				margin-bottom: 0.8rem;
			}
	/* 1360px / 16 */
	@media only screen and (max-width: 85em) {
		.form--search-logs.form--horizontal {
			display: block;
		}
			.form--search-logs.form--horizontal > .form__row + .form__row {
				margin: var(--gutter) 0 0 0;
			}
	}