@import "reset.css";
@import "fonts/Gotham.css";
@import "smt.css";
@import "select2.css?t=21";
@import "nouislider.css";
@import "tooltipster.bundle.min.css";
@import "plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css";

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

body.preload * {
	animation-duration: 0s !important;
	-webkit-animation-duration: 0s !important;
	transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

a:link, a:visited, a:hover, a:focus {
	color: inherit;
}

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

html, body {
	background: #fff;
	font-family: 'Gotham', Arial, sans-serif;
	font-size: 12px;
	color: #111;
	/* overflow-y: hidden; */
}

	@media (min-width: 600px) {
		html, body { font-size: 14px; }
	}

	@media (min-width: 800px) {
		html, body { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		html, body { font-size: 16px; }
	}

	/*
@media (min-width: 1400px) {
		html, body { font-size: 18px; }
	}

	@media (min-width: 1850px) {
		html, body { font-size: 20px; }
	}
*/

/* The header is a white bar floating on a light ground, inset from the window, with the mark in its
   own cell behind a hairline — the ground continues down through the breadcrumb strip, so the two
   read as one region of chrome that ends where the white page begins.

   Everything below overrides a dark bar whose nav was absolutely centred and whose mark hung over
   the edge on a negative margin, so several rules exist only to unwind that. */
/* One ground under the bar and the trail: blush at the top, washing out to the page's white by the
   time the content starts. Carried by the wrapper rather than by each element, so there is no seam
   where the two meet. */
/* The two colour stops are registered custom properties, which is what makes them animatable —
   a gradient itself cannot be transitioned, but a colour held in a registered property can, and the
   gradient is recomputed as it moves. Browsers without @property simply keep the initial blue. */
@property --chrome-top {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 147, 255, 0.16);
}

@property --chrome-mid {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 147, 255, 0.06);
}

.chrome {
	background: linear-gradient(to bottom,
		var(--chrome-top) 0%,
		var(--chrome-mid) 52%,
		rgba(255, 255, 255, 1) 100%);
	/* Long enough that it is weather rather than an effect: nobody should catch it moving. */
	animation: chrome-drift 75s ease-in-out infinite;
}

/* Four blues around #0093ff — azure, sky, teal-leaning cyan, indigo — so the band changes
   temperature without ever leaving the family. */
@keyframes chrome-drift {
	0%, 100% {
		--chrome-top: rgba(0, 147, 255, 0.16);
		--chrome-mid: rgba(0, 147, 255, 0.06);
	}
	25% {
		--chrome-top: rgba(56, 189, 248, 0.18);
		--chrome-mid: rgba(56, 189, 248, 0.07);
	}
	50% {
		--chrome-top: rgba(45, 200, 205, 0.16);
		--chrome-mid: rgba(45, 200, 205, 0.06);
	}
	75% {
		--chrome-top: rgba(88, 110, 224, 0.17);
		--chrome-mid: rgba(88, 110, 224, 0.06);
	}
}

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

/* The ground stays in the flow and scrolls away with the page; only the white bar travels. The
   header keeps the bar's height in reserve so nothing slides underneath it at rest. */
header {
	position: relative;
	background: transparent;
	padding: 1rem 1rem 0.875rem;
	min-height: calc(6rem + 1.875rem);
	margin-bottom: 0;
}

	/* The horizontal padding is the bar's resting inset, and it has to equal the inset it takes once
	   pinned, or the bar shifts sideways at the moment it detaches. */
	@media (min-width: 500px) {
		header {
			padding: 1.25rem 2rem 1rem;
			min-height: calc(6rem + 2.25rem);
		}
	}

	/* Fixed rather than sticky: sticky would carry the grey with it, and inside a non-sticky
	   ancestor it would stop travelling as soon as that ancestor scrolled past.
	   Out of the way on the way down, back the moment you head up — the nav is wanted when you are
	   looking for somewhere else to be, which is what scrolling up usually means. */
	/* In the flow to begin with — it is part of the header — and only detaches once the page has
	   scrolled past it. Capped to the page's own inner width so it lines up with the content: .wrap
	   is 1600px border-box with 1rem of padding, so its text edge sits 1rem in. */
	header .wrap {
		position: relative;
		max-width: calc(1600px - 2rem);
		margin: 0 auto;
		display: flex;
		align-items: stretch;
		min-height: 6rem;
		padding: 0;
		/* Glass. The tint is thin enough to read as a pane rather than a panel — most of what is
		   behind it survives, blurred and lifted. @supports keeps the fallback opaque, because at
		   this tint a browser without backdrop-filter would show nav text over raw content. */
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 16px;
		z-index: 500;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}

		/* Promoted to its own layer only while detached: a blurred pane over moving content is
		   repainted constantly otherwise, which is what the roughness was. will-change is scoped to
		   that state rather than left on, since a permanent layer costs memory on every page. */
		header.is-pinned .wrap {
			will-change: transform;
			transform: translateZ(0);
		}

		@media (min-width: 500px) {
			header .wrap { max-width: calc(1600px - 4rem); }
		}

		/* At rest it sits on the gradient rather than over content, so it carries more of its own
		   white and casts less — the thin glass and the deeper shadow are for when it is floating
		   over something. */
		header:not(.is-pinned) .wrap {
			background: rgba(255, 255, 255, 0.9);
			box-shadow:
				0 1px 1px rgba(16, 14, 13, 0.04),
				0 4px 10px -4px rgba(16, 14, 13, 0.10),
				0 18px 40px -22px rgba(16, 14, 13, 0.15);
		}

		/* Detached. The header keeps its height in reserve, so nothing moves when this happens, and
		   `top` matches the header's own top padding so the fixed slot and the resting slot coincide
		   at the top of the page — that is what lets the bar hand back to the flow invisibly. */
		header.is-pinned .wrap {
			position: fixed;
			top: 1rem;
			left: 1rem;
			right: 1rem;
			/* Floating over content now, so it casts wide and soft rather than tight. */
			box-shadow:
				0 1px 1px rgba(16, 14, 13, 0.04),
				0 4px 10px -4px rgba(16, 14, 13, 0.10),
				0 18px 50px 0px rgba(16, 14, 13, 0.25);
		}

			@media (min-width: 500px) {
				header.is-pinned .wrap {
					top: 1.25rem;
					left: 2rem;
					right: 2rem;
				}
			}

		/* Nothing to cast onto once it is off the top of the window, and a 100px spread hanging below
		   a bar you cannot see would darken the content it is meant to have left. */
		header.is-pinned.is-tucked .wrap {
			transform: translate3d(0, calc(-100% - 1.5rem), 0);
			box-shadow: none;
		}

		/* Used for the single frame in which the bar changes between riding with the page and being
		   fixed. That change is a reposition, not a movement, and animating it is what produced the
		   flash at the handover. */
		header.is-instant .wrap {
			transition: none !important;
		}

		/* Only thin the tint where the blur will actually stand behind it. */
		@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
			header .wrap {
				background: rgba(255, 255, 255, 0.38);
				-webkit-backdrop-filter: saturate(2) blur(18px);
				backdrop-filter: saturate(2) blur(18px);
			}
		}

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

	/* Its own cell, divided off like the wordmark in a masthead. */
	header .logo.sknmtch {
		flex: 0 0 auto;
		width: 5.25rem;
		height: auto;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		background: url(img/solutions/inference-mark-light.png) no-repeat center;
		background-size: 3.5em;
		border: 0;
		border-right: 1px solid rgba(16, 14, 13, 0.08);
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		z-index: 9;
		position: relative;
	}

		header .logo.sknmtch:hover {
			transform: none;
			box-shadow: none;
		}

		header .logo.sknmtch:active {
			transform: none;
			box-shadow: none;
		}

		@media (min-width: 500px) {
			header .logo.sknmtch {
				width: 5.75rem;
				margin-bottom: 0;
			}
		}

	header .logout {
		position: static;
		align-self: center;
		margin-left: auto;   /* overridden when the shortcut group is present, which claims it instead */
		padding: 0 1.25rem 0 1rem;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		color: #a49c96;
		transition: color 0.2s ease;
	}

		header .logout:hover { color: #100e0d; }

	/* Centred in the bar rather than trailing the mark: absolutely, so the mark on one side and sign
	   out on the other cannot pull it off centre as their widths change. */
	header nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
		font-weight: 300;
		padding-left: 0;
	}

		/* A track holding the items, the way inferencebeauty.com groups its nav: the set reads as one
		   control, and the current section is a filled pill inside it rather than a mark on the bar. */
		header nav ul {
			display: flex;
			/* One row: the track is centred on the bar, so a second line grows the pill downward and
			   pushes it off centre rather than wrapping neatly. */
			flex-flow: row nowrap;
			align-items: center;
			min-width: 0;
			justify-content: flex-start;
			padding: 0.25rem 0.3rem;
			background: #f8f8f8;
			border-radius: 999px;
		}

		/* The outer list only: the nested one is a group inside this track, not a track of its own. */
		header nav > ul {
			border: 1px solid #ccc;
		}

			/* Above the pill, which is a sibling of the list and would otherwise paint over the labels
			   simply by coming later in the document. */
			header nav ul li {
				color: #6c6560;
				position: relative;
				z-index: 1;
			}

				header nav ul li > a {
					display: block;
					position: relative;
					z-index: 1;
					margin: 0;
					padding: 1.125rem 1.625rem;
					border-radius: 999px;
					font-size: 1rem;
					font-weight: 400;
					letter-spacing: normal;
					color: #6c6560;
					text-decoration: none;
					cursor: pointer;
					/* Paced to the pill's travel, not snapped: at 0.16s the label turned white long before
					   the pill arrived under it, leaving it briefly unreadable against the track. */
					transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
				}

				/* One pill for the whole track, moved to whichever item holds it, rather than one per
				   item fading in and out. The label under it is what changes, so the pill is a single
				   object that travels — which is also why it is a sibling of the list rather than a
				   background on any item. Positioned from JS; see _parts/header.php. */
				header nav .nav-pill {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
					border-radius: 999px;
					background: linear-gradient(135deg, #0093ff, #0080e6);
					opacity: 0;
					pointer-events: none;
					transition:
						transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
						width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
						opacity 0.18s ease-out;
				}

					/* For the first placement, and after a resize: it should be where it belongs, not
					   travel there from the corner. */
					header nav .nav-pill.is-instant {
						transition: none;
					}

				/* The pointer's item takes the label colour; the current section keeps it only while
				   nothing else is hovered, since by then the pill has moved away. */
				header nav ul li:hover > a,
				header nav > ul:not(:hover) li.active > a,
				/* The directory chip is not a destination — the pill stays where it is while it is
				   hovered, so the current section has to stay white with it. */
				header nav > ul:has(> .nav-more:hover) li.active > a {
					color: #fff !important;
				}

	.breadcrumbs {
		display: none;
	}

	@media (min-width: 750px) {
		.breadcrumbs {
			display: inline-block;
		}
	}

.wrap {
	padding: 1rem;
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

	@media (min-width: 500px) {
		.wrap {
			padding: 2rem;
		}
	}

	.wrap.noPaddingTop {
		padding-top: 0;
	}

	.gray {
		background: #efefef;
	}

.area {
	padding: 2rem 0;
}

	.area .wrap {
		padding-top: 0;
		padding-bottom: 0;
	}

	.area.area-light {
		background: #efefef;
	}

/* Present for screen readers, absent on screen. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ PROTOTYPE: all areas

   One chip at the end of the track opens a directory of everything the application holds. The four
   sections stay the whole bar; this is how the rest is reached, so the bar does not have to grow to
   hold twenty destinations.

   Delete this block with the markup in _parts/header.php. */

/* A circle holding a chevron. No label: the sections are named, and this is the way to everything
   else — the name lives in the title and in the screen-reader text. */
.nav-more > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	margin: 0;
	padding: 0;
	border: 1px solid #d8d3ce;
	border-radius: 999px;
	background: none;
	font: inherit;
	line-height: 1;
	color: #6c6560;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

	/* The chevron is drawn rather than a glyph, so it can turn when the panel opens. */
	.nav-more > button i {
		width: 0.4375rem;
		height: 0.4375rem;
		margin-top: -0.1875rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nav-more:hover > button,
	.nav-more.is-open > button {
		border-color: #0093ff;
		background: rgba(0, 147, 255, 0.10);
		color: #0093ff;
	}

	.nav-more.is-open > button i { transform: rotate(-135deg) translate(-2px, -2px); }

	/* Beside the track, not in it. The nav is a flex row, so the chip simply follows the list. */
	.nav-more {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 0.625rem;
	}

/* ---------------------------------------------------------------- the directory */

.nav-areas {
	position: absolute;
	/* Centred on the chip it belongs to, and clear of the bar — which the chip sits inside, so the
	   offset has to cover the rest of the bar's height as well as the gap under it. */
	top: calc(100% + 2.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(3, minmax(9.5rem, 1fr));
	gap: 1.875rem 2.75rem;
	width: 40rem;
	padding: 1.75rem 2rem 2rem;
	background: #fff;
	border: 1px solid #e6e1dd;
	border-radius: 16px;
	box-shadow:
		0 1px 2px rgba(16, 14, 13, 0.05),
		0 24px 50px -22px rgba(16, 14, 13, 0.5);
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	text-align: left;
}

	.nav-areas[hidden] { display: none; }

	/* The panel hangs below the bar with a gap under it. Without something to travel across, moving
	   the pointer from the chip to the panel leaves the menu and closes it. */
	.nav-areas::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -2.5rem;
		height: 2.5rem;
	}

	/* The heading is a heading, not a label: set at reading size with a rule under it, so each
	   column reads as its own short list rather than as one long one broken up by tags. */
	.nav-areas-group p {
		margin: 0 0 0.75rem;
		padding-bottom: 0.625rem;
		border-bottom: 1px solid #ece7e3;
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: #100e0d;
	}

	.nav-areas-group a {
		display: block;
		padding: 0.3125rem 0;
		font-size: 0.9375rem;
		font-weight: 300;
		line-height: 1.35;
		color: #6c6560;
		text-decoration: none;
		transition: color 0.16s ease;
	}

		.nav-areas-group a:hover { color: #0093ff; }

		/* Where you are. The dot sits in the gutter so the labels keep one left edge, and the weight
		   change alone would be too quiet to find in a list of eighteen. */
		.nav-areas-group a.is-current {
			position: relative;
			font-weight: 500;
			color: #100e0d;
		}

			.nav-areas-group a.is-current::before {
				content: "";
				position: absolute;
				left: -0.75rem;
				top: 50%;
				width: 5px;
				height: 5px;
				margin-top: -2.5px;
				border-radius: 999px;
				background: #0093ff;
			}

	/* No breakpoint hides this: it is the only way to most of the application, so it has to survive
	   every width the sections do. */

	/* Three columns while there is room for them, then two, then one. The panel is centred on the
	   chip until that would push it off the window, at which point it right-aligns instead — the
	   chip sits near the right, so that is the edge it runs out of. */
	@media (max-width: 1100px) {
		.nav-areas {
			left: auto;
			right: 0;
			transform: none;
			width: 32rem;
			grid-template-columns: repeat(2, minmax(9rem, 1fr));
		}
	}

	/* Narrow enough that anchoring to the chip is no help — the chip itself may be near or past the
	   window edge. Centred on the track instead, which is centred in the bar, so the panel lands in
	   the middle of the window whatever the chip is doing.

	   position: fixed is no use here: <nav> carries a transform to centre itself, and a transformed
	   ancestor becomes the containing block for fixed descendants, so the panel would be pinned to
	   the nav rather than to the window. */
	@media (max-width: 720px) {
		/* Dropping the chip out of positioned context hands the panel back to <nav>, which is centred
		   in the bar — so "centre on the chip" becomes "centre on the window", which is what is
		   wanted once the chip itself is squeezed against the edge. */
		.nav-more { position: static; }

		.nav-areas {
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			width: min(calc(100vw - 2rem), 22rem);
			max-height: calc(100vh - 9rem);
			gap: 1.25rem 1.5rem;
			padding: 1.25rem 1.25rem 1.5rem;
			grid-template-columns: 1fr;
			overflow-y: auto;
		}

		/* The bridge is only needed while the panel hangs off the chip. */
		.nav-areas::before { content: none; }
	}


/* The band the trail sits on. Its own ground, so the chrome ends and the page begins on a visible
   line rather than on trust. */
/* Sits on the wrapper's gradient, so it needs no ground of its own. */
.crumb-band {
	background: transparent;
	margin-bottom: 2.5rem;
}

	.crumb-band .wrap {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

.smt-tag {
	display: block;
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #6c6560;
	width: 100%;
}

	.smt-tag a {
		text-decoration: none;
		color: #6c6560;
		transition: color 0.18s ease;
	}

	.smt-tag a:hover {
		color: #100e0d;
	}

	/* Slashes rather than em dashes: a dash reads as a break in a sentence, a slash as a path. */
	.smt-tag i {
		display: inline-block;
		margin: 0 0.5rem;
		font-style: normal;
		color: #bdb7b1;
	}

	/* The last crumb is where you are, so it is the one thing here in ink. */
	.smt-tag .breadcrumbs { color: #100e0d; }

h1 {
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	/* Same fluid size as h2, just bold — the five em steps this used to climb through are what the
	   clamp replaces. */
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	margin-bottom: 0.25em;
}

h2 {
	font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	/* Fluid rather than a step at 800px: the page heading should read as the page's title at any
	   width, and at the old 1.3em it was barely above the body copy. */
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	margin-bottom: 1.25em;
}

h2.thin,
h2 .thin {
	font-weight: 200;
}

h2.delete {
	display: inline-block;
	background-color: #d83c3c;
	color: #fff;
	padding: 0.25em 0.5em;
}

h3 {
	font-weight: 600;
	line-height: 120%;
	font-size: 1.1em;
	margin-top: 2em;
	margin-bottom: 1em;
}

	@media (min-width: 800px) {
		h3 {
			font-size: 1.2em;
			line-height: 120%;
		}
	}

	@media (min-width: 1000px) {
		h3 {
			font-size: 1.3em;
			line-height: 120%;
		}
	}

	@media (min-width: 1200px) {
		h3 {
			font-size: 1.4em;
			line-height: 120%;
		}
	}

	.fieldset-title {
		margin-top: 0;
	}

p {
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 1em;
}

.highlight { color: #0093ff; }
.styling-data .highlight { color: #0093FF; }

.legal-text {
	max-width: 1000px;
	margin: 5px auto;
	padding-left: 4em;
}

	.legal-text h1 {
		margin: 2em 0 1em 0;
	}

	.legal-text .num {
		position: absolute;
		text-align: right;
		transform: translateX(-75px);
		font-family: monospace;

		font-size: 1rem;
		width: 50px;
	}

	.legal-text ul {
		padding-left: 50px;
	}

	.legal-text ul.bullets {
		list-style-type: disc;
	}

		.legal-text ul li {
			margin: 1em 0;
			line-height: 140%;
		}

		.legal-text ul li .num {
			text-align: left;
			transform: translateX(-50px);
		}

.login-holder,
.activation-holder {
	background: #111;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 700px;
	top: 0;
	left: 0;
}

.activation-holder {
	min-height: 450px;
}

	.activation-area {
		color: #fff;
		padding: 1em;
		width: 100%;
		max-width: 500px;
		position: absolute;
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

		@media (min-width: 400px) {
			.activation-area {
				padding: 1em;
				width: 85%;
			}
		}

		.activation-holder h2+h2 {
			margin-top: -1.5em;
		}

	.login-area,
	.signup-area {
		background: #444444;
/* 		border-radius: 1em; */
		padding: 3em;
		width: 85%;
		max-width: 500px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) scale(0.8);
		z-index: 0;
		box-shadow: 0 0 3em rgba(0,0,0,0.2);
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

		.login-area {
			transform: translateX(-50%) translateY(-15%) scale(0.8);
		}

		.signup-area {
			transform: translateX(-50%) translateY(-38%) scale(0.8);
		}

		.login-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		.signup-area.active {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}

		@media (min-width: 650px) {
			.login-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.signup-area {
				transform: translateX(-40%) translateY(-40%) scale(0.8);
			}

			.login-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}

			.signup-area.active {
				transform: translateX(-60%) translateY(-50%) scale(1);
			}
		}

		.login-area.active,
		.signup-area.active {
			background: #fff;
			z-index: 1;
		}

		.login-area .inner,
		.login-area .login-forgot-password-holder,
		.signup-area .inner {
			opacity: 0;
			pointer-events:none;
		}

		.login-area.active .inner,
		.login-area.active .login-forgot-password-holder,
		.signup-area.active .inner {
			opacity: 1;
			pointer-events:all;
		}

	.login-holder h2 {
		font-weight: normal;
	}

	.login-holder h2 .understate {
		color: #999;
	}

	.login-area .login-forgot-password-holder {
		margin-top: 3em;
	}

	.login-area .login-forgot-password {
		background: #f8f8f8;
		border-top: 1px solid #eee;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
/* 		border-radius: 0 0 1em 1em; */
		padding: 1.5em 3em;
		color: #777;
	}

	.login-area .error-list,
	.signup-area .error-list {
		margin-bottom: 1em;
	}

	.login-area .error-list li,
	.signup-area .error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 3em;
		line-height: 120%;
		margin: 1px -3em 0 -3em;
		position: relative;
	}

		.login-area .error-list li::before,
		.signup-area .error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

	/* SSO / Sign in with SSO */
	.sso-divider {
		text-align: center;
		margin: 1.5em 0;
		position: relative;
	}

	.sso-divider::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 1px;
		background: #ccc;
	}

	.sso-divider span {
		background: #fff;
		padding: 0 1em;
		position: relative;
		color: #999;
		font-size: 0.875em;
	}

	.sso-button-wrap {
		text-align: center;
	}

	.sso-button {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.6em 1.5em;
		border: 1px solid #ccc;
		border-radius: 4px;
		color: #333;
		text-decoration: none;
		font-size: 1em;
		font-weight: 500;
		transition: all 0.2s ease-in-out;
	}

	.sso-button:hover {
		background: #f8f8f8;
		border-color: #aaa;
	}

	.sso-button svg {
		flex-shrink: 0;
	}

	.signup-legal-accept {
		width: 100%;
		margin: 0.5em 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

		.signup-legal-accept label {
			width: calc(100% - 2rem);
		}

		.signup-legal-accept a {
			text-decoration: underline;

		}
/*

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(20px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-40px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(40px, 0, 0);
  }
}
*/

/* A launcher of twenty-odd destinations, so it is built like one: each thing is an icon on a raised
   chip with its name under it, floating on the page with room to breathe, rather than a box drawn
   around it. Sized by the grid itself, so the three width breakpoints it used to need are gone. */
.columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	gap: 0.5rem;
}

	.half {
		position: relative;
	}

		@media (min-width: 600px) {
			.half {
				width: 50%;
				width: calc(50% - 15px);
			}
		}

	.profile-item {
		width: calc(50% - 0.25rem);
		position: relative;
		display: block;
		/* padding: 1em; */
		background: #f8f8f8;
		border: 1px solid #fff;
		border-radius: 1rem;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.profile-item.aside {
			background: #eee;
			color: #0093ff;
		}

		@media (min-width: 600px) {
			.profile-item {
				width: calc(33.333% - 0.3333rem);
			}
		}

		@media (min-width: 800px) {
			.profile-item {
				width: calc(25% - 0.375rem);
			}
		}

		@media (min-width: 1200px) {
			.profile-item {
				width: calc(20% - 0.4rem);
			}
		}

		/* Masked, not painted: the SVG supplies the shape and background-color supplies the colour,
		   which is the only way a black line icon can take the blush on hover. Every rule below sets
		   a mask rather than a background-image for the same reason. */
		.profile-item span {
			width: 4rem;
			height: 4rem;
			display: block;
			margin: 0 auto 1rem auto;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

			.profile-item span.lifestyle { background-image: url(img/luggage.svg); }
			.profile-item span.look { background-image: url(img/pantone.svg); }
			.profile-item span.skincare { background-image: url(img/lotion.svg); }
			.profile-item span.basic { background-image: url(img/key.svg); }
			.profile-item span.location { background-image: url(img/position.svg); }
			.profile-item span.makeup { background-image: url(img/cosmetics.svg); }
			.profile-item span.product { background-image: url(img/pros-and-cons.svg); }
			.profile-item span.skintype { background-image: url(img/pimples.svg); }
			.profile-item span.allergies { background-image: url(img/biology.svg); }
			.profile-item span.hair { background-image: url(img/comb.svg); }
			.profile-item span.feedback { background-image: url(img/feedback.svg); }
			.profile-item span.contact { background-image: url(img/paper-plane.svg); }

			.profile-item span.manage-brand { background-image: url(img/manage-brand.svg); }
			.profile-item span.manage-high-prio { background-image: url(img/manage-high-prio.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-certifications { background-image: url(img/manage-certifications.svg); background-size: 100%; background-position: top; }
			.profile-item span.manage-retailer { background-image: url(img/manage-retailer.svg); }
			.profile-item span.manage-user { background-image: url(img/manage-user.svg); }
			.profile-item span.manage-api-users { background-image: url(img/manage-api-users.svg); }
			.profile-item span.manage-ingredient { background-image: url(img/manage-ingredient.svg); }
			.profile-item span.manage-translation { background-image: url(img/manage-translation.svg); }
			.profile-item span.manage-ean { background-image: url(img/manage-ean.svg); }
			.profile-item span.manage-labels { background-image: url(img/manage-labels.svg); }
			.profile-item span.manage-questionnaires { background-image: url(img/manage-questionnaires.svg); }
			.profile-item span.manage-explainers { background-image: url(img/manage-explainers.svg); }
			.profile-item span.manage-bulk-upload { background-image: url(img/manage-bulk-upload.svg); }
			.profile-item span.manage-stats { background-image: url(img/manage-stats.svg); }
			.profile-item span.manage-log { background-image: url(img/manage-log.svg); }
			.profile-item span.manage-inci-analyzer { background-image: url(img/manage-inci-analyzer.svg); }
			.profile-item span.fragrance-notes { background-image: url(img/fragrance-notes.svg); }

		.profile-item a {
			display: block;
			padding: 3rem 1rem 2.5rem 1rem;
			height: 100%;
			text-align: center;
			text-decoration: none;
			font-weight: 600;
		}

			/* The label rides in a bubble of its own rather than sitting flat on the tile, so it reads
			   as a tag on the icon. It is an element because the label used to be a bare text node,
			   which CSS cannot reach. */
			.profile-item .tile-label {
				display: inline-block;
				padding: 0.5rem 1.0625rem;
				background: #fff;
				border: 1px solid #ccc;
				border-radius: 999px;
				font-family: 'Bricolage Grotesque', 'Gotham', Arial, sans-serif;
				font-size: 0.9375rem;
				font-weight: 500;
				letter-spacing: -0.005em;
				line-height: 1.2;
				color: #100e0d;
				transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out;
			}

			/* Flat rather than the nav pill's gradient: `background` cannot interpolate from a solid
			   colour to a gradient, so the bubble would snap instead of fading in. */
			.profile-item:hover .tile-label {
				background: #0093ff;
				border-color: #0093ff;
				color: #fff;
			}

			@media (min-width: 500px) {
				.profile-item a {
					padding: 4rem 1rem 3.5rem 1rem;
				}
			}

		/* The crimson underscore was from the old palette and read as an alert next to the blush
		   chrome. The tile takes a light blush wash and comes forward instead. */
		/* A soft light blooming from under the icon and falling away to the tile's own grey. It lives
		   on a pseudo-element because one gradient cannot be transitioned into another — fading and
		   growing a layer is what makes it arrive rather than switch on. */
		.profile-item::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: inherit;
			background: radial-gradient(circle at 50% 42%,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0.65) 42%,
				rgba(255, 255, 255, 0) 72%);
			opacity: 0;
			transform: scale(0.88);
			pointer-events: none;
			transition:
				opacity 0.35s ease-out,
				transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
		}

		.profile-item:hover {
			border-color: #fff;
		}

			.profile-item:hover::after {
				opacity: 1;
				transform: scale(1);
			}

		/* Above the glow. */
		.profile-item a {
			position: relative;
			z-index: 1;
		}

		@media (prefers-reduced-motion: reduce) {
			.profile-item::after { transition: none; }
		}

.leaf {
	position: absolute;
	height: auto;
	width: 100%;
	margin-top: -15em;
}

.signup-wrap {
	margin: 100px auto;
	width: 90%;
	max-width: 400px;
}

form {

}

	input:-webkit-autofill {
	    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
	}

	.form-field-wrap.two-columns {
		border-bottom: 1px dotted #B3BFA2;
		padding: 2em 0;
	}

		#ingredients-holder .form-field-wrap.two-columns {
			padding: 0.5em 0;
		}

	.left-label {
		margin-bottom: 2em;
		font-weight: 600;
	}

	@media (min-width: 650px) {
		.form-field-wrap.two-columns {
			padding: 3em 0;
		}

		.left-label {
			width: 40%;
			float: left;
			padding-right: 3em;
			line-height: 130%;
			margin-bottom: 0;
		}

		.right-form-field {
			width: 60%;
			float: left;
		}

		#ingredients-holder .left-label {
			padding-right: 1.5em
		}
	}

	form.fancy-form {
		width: 100%;
	}

	.form-field-wrap input.text.fancy-field {
		padding: 0;
		font-size: 1.375em;
		outline: none;
		border: 0;
		padding: 0.25em 0;
		width: 100%;
		font-weight: 300;
		color: #111;
		border-bottom: 1px solid #ccc;
		margin-bottom: 2px;
		background: transparent;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.text.fancy-field:focus {
			border-bottom: 1px solid #0093ff;
		}

	.form-field-wrap input.fancy-button {
		padding: 0;
		font-size: 1.625em;
		outline: none;
		background: transparent;
		border: 0;
		width: auto;
		font-weight: 600;
		color: #0093ff;
		cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.form-field-wrap input.fancy-button:hover,
		.form-field-wrap input.fancy-button:focus {
			background-color: #0093ff;
			color: #fff;

		}

		input.fancy-button.disabled {
			pointer-events: none;
		}

	fieldset {
		border: 0;
		padding: 0;
	}

		.form-field-wrap {
			padding: 0.5em 0;
		}

		.form-field-wrap label {
			display: block;
			padding: 0 0 0.25em 0;
			line-height: 130%;
		}

		.form-field-wrap .form-field-hint {
			margin: 0;
			color: #777777;
			font-size: 0.875em;
			margin-bottom: 0.25em;
			font-weight: 400;
		}

		.form-field-wrap input.text,
		.form-field-wrap textarea.text,
		.form-field-wrap select.simple-text-select,
		.form-field-wrap input.text-button {
			width: 100%;
			padding: 0.6em;
			font: inherit;
			border: 1px solid #ccc;
			background: #fff;
			outline: none;
			border-radius: 0;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

		.form-field-wrap input.text:disabled,
		.form-field-wrap textarea.text:disabled {
			opacity: 0.6;
			background: #eee;
		}

		#ingredients-holder .form-field-wrap input.text:disabled {
			opacity: 1;
		}

		.icon-autoassigned {
			position: relative;
		}

		.icon-autoassigned input.text {
			padding-left: 2em;
			position: relative;
			color: #0093ff;
		}

			.icon-autoassigned::before {
				content: "";
				width: 0.9em;
				height: 0.9em;
				background: url(img/lightning.svg) no-repeat center;
				background-size: contain;
				position: absolute;
				left: 0.75em;
				top: 50%;
				transform: translateY(-50%);
				z-index: 9;
			}

		.form-field-wrap input.text:focus,
		.form-field-wrap textarea.text:focus,
		.form-field-wrap select.simple-text-select:focus {
			border-bottom-color: #0093ff;
			-webkit-box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
			-moz-box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
			box-shadow: inset 0px -6px 0px -3px rgba(0, 147, 255,1);
		}

		.form-field-wrap textarea {
			height: 10em;
			line-height: 130% !important;
		}

		.form-field-wrap select.simple-text-select {
			width: auto;
			-webkit-appearance:none;
			padding-right: 2.5em;
			position: relative;
			background-image:url(img/select-dropdown.png);
			background-position: right center;
			background-size: auto 55%;
			background-repeat: no-repeat;
		}

		.form-field-wrap input.text-button {
			width: auto;
			cursor: pointer;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

		}

		input[type='submit'].button,
		a.submit.button {
			background: #0093ff;
			padding: 0.6em;
			color: #fff;
			border: 0;
			font: inherit;
			font-size: 1.4em;
			font-weight: 600;
			margin-right: 1em;
			cursor: pointer;
			-webkit-appearance: none;
			border-radius: 0;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

			input[type='submit']:disabled {
				background: #333;
				color: #666;
				pointer-events:none;
			}

			input[type='submit'].button:hover,
			input[type='submit'].button:focus,
			a.submit.button:hover,
			a.submit.button:focus {
				background: #cb054a
			}

			input[type='submit'].button:active,
			a.submit.button:active {
				background: #9b0338
			}

		.form-field-wrap.checkbox-wrap {
			padding: 0.25em 0;
		}

		.checkbox-wrap label {
			display: inline-block;
			margin-left: 0.4em;
		}

		#mapcanvas {
			height: 300px;
			width: 100%;
			background: #eee;

		}

.rows-form {
	width: 100%;
	margin: 0 0 3rem 0;
}

	.rows-form .form-row {
		border-bottom: 1px dotted rgba(0,0,0,0.2);
		display: flex;
		flex-flow: row wrap;
		align-items: center;
	}

		.rows-form .form-row:last-child {
			border-bottom: 0;
		}

	.rows-form .form-row label {
		width: 30%;
		display: block;
		max-width: 250px;
		text-align: left;
		padding: 1.5rem 0;
		border-right: 1px dotted rgba(0,0,0,0.15);
		padding-right: 1.25rem;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select,
	.rows-form .form-row.form-row-submit input,
	.rows-form .form-row.form-row .value {
		margin-left: 0.5rem;
	}

	.rows-form .form-row.form-row .value {
		flex: 1;
	}

	.rows-form .form-row.form-row-textfield input,
	.rows-form .form-row.form-row-textarea textarea,
	.rows-form .form-row.form-row-select select {
		flex: 1;
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		background: #eee;
		border: 2px solid #eee;
		padding: 0.75rem 1rem;
		border-radius: 0;
		line-height: 120%;
		transition: all 0.2s ease-in-out;
	}

	.rows-form .form-row.form-row-textfield input:focus,
	.rows-form .form-row.form-row-textarea textarea:focus,
	.rows-form .form-row.form-row-select select:focus {
		border-color: #0093ff;
	}

	.styling-data .rows-form .form-row.form-row-textfield input:focus,
	.styling-data .rows-form .form-row.form-row-textarea textarea:focus,
	.styling-data .rows-form .form-row.form-row-select select:focus {
		border-color: #0093ff;
	}

	.rows-form .form-row.form-row-submit input {
		font: inherit;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		padding: 0.75rem 2rem;
		border-radius: 4px;
		line-height: 120%;
		background: #000;
		border: 2px solid #000;
		color: #fff;
		font-weight: bold;
		transition: all 0.2s ease-in-out;
	}

	.styling-data .rows-form .form-row.form-row-submit input {
		background: #0093ff;
		border-color: #0093ff;
		background: linear-gradient(180deg, rgba(0,147,255,1) 0%, rgba(0,140,244,1) 100%);
	}

.pac-container {
	font-family: inherit;
}

	.pac-container .pac-item {
		font-size: 1rem;
		padding: 0.3em 0.6em;
	}

		.pac-container .pac-item .pac-icon {
			display: none;
		}

		.pac-container .pac-item .pac-item-query {
			font-size: inherit;
		}

#geolocate-btn {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	background: url(img/geolocate.svg) no-repeat center;
	background-size: contain;
	z-index: 99;
	display: block;
	overflow: hidden;
	text-indent: -1000px;
}

form.sectioned {
	max-width: 1000px;
}

/* Sections are light panels and the fields inside them are white. The original had both at nearly
   the same tone — a #f8f8f8 panel against the fields' #f7f5f3 fill — so the fields vanished into
   their own container. Keeping the panel and taking the fill off the fields separates them the
   other way round, which is the one that leaves the section reading as a section. */
.wrap form.sectioned fieldset,
.wrap fieldset {
	background: #f7f5f3;
	border: 0;
	border-left: 5px solid #0093ff;
	border-radius: 0;
	/* The Overview sits directly in .wrap while the rest are inside form.sectioned, which carries the
	   cap — so it alone ran to the full width. Capping the sections themselves keeps them aligned
	   whichever parent they hang off. */
	max-width: 1400px;
	padding: 1.75rem 2rem;
	margin: 0 0 1rem 0;
}

	.wrap .fieldset-title,
	.wrap form.sectioned .fieldset-title {
		margin: 0 0 1.25rem 0;
		/* The root font-size steps 12/14/15/16px by viewport, so this rides that ladder down on its
		   own — 28px at the widest, 21px on a phone. */
		font-size: 1.75rem;
		line-height: 1.2;
		color: #0093ff;
		font-weight: 500;
	}

	form.sectioned p.descr {

	}

ul.error-list {
	margin-bottom: 1em;
}

	ul.error-list li {
		border-bottom: 0;
		background: rgba(210, 35, 62, 0.15);
		color: #94040e;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.error-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/error-red.svg) no-repeat center center;
			background-size: contain;
		}

ul.response-list {
	margin-bottom: 1em;
}

	ul.response-list li {
		border-bottom: 0;
		background: rgba(35, 177, 209, 0.15);
		color: #046e94;
		padding: 1em 1em 1em 3em;
		line-height: 120%;
		margin: 1px 0 0 0;
		position: relative;
	}

		ul.response-list li::before {
			content: "";
			position: absolute;
			left: 1em;
			width: 1em;
			height: 1em;
			top: 50%;
			transform: translateY(-50%);
			background: url(img/check-blue.svg) no-repeat center center;
			background-size: contain;
		}

	.mandatory::after {
		content:" *";
		color: #ed2929;
	}

.hidden {
	display: none !important;
}

strong {
	font-weight: 600;
}

.clear {
	clear: both;
}

table {

}

table.simple {
	font-size: 0.875em;
	width: 100%;
}

	table.simple .bg-green {
		background: rgba(62, 185, 19, 0.27)
	}

	/* Column headers read the same whether a list is built from .line-item rows or a table: same
	   ground, same uppercase micro-type, same hairline underneath. */
	table.simple thead {
		background: #f3f5f7;
		border-bottom: 1px solid #ccc;
		text-align: left;
		white-space: nowrap;
	}

		table.simple thead tr th {
			padding: 1.1em 1em 1.1em 0;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 0.75rem;
			letter-spacing: 0.1em;
		}

		/* rem, not em: the header cells are set at 0.75rem and the body at 0.875em, so a shared "1em"
		   inset resolved to two different widths and put the select-all 2px left of its column. */
		table.simple thead tr th:first-child { padding-left: 0.875rem; }

	table.simple tbody {

	}

	table.simple tbody tr:hover {
		background: #f8f8f8;
	}

	table.simple td {
		padding: 0.75em 1em 0.75em 0;
		text-align: left;
		border-bottom: 1px dotted #ccc;
	}

		/* Matches the header's own inset so the first column — usually the select-all checkbox and
		   the row checkboxes under it — lines up down the table. */
		table.simple td:first-child { padding-left: 0.875rem; }

/* Checkboxes drawn from the input itself, for the ones that do not carry a beautifulCheckboxes
   span to style. Same square, border and blue tick as .js-checkbox-activator, so a plain checkbox
   and an enhanced one are the same object to look at. */
table.simple input[type="checkbox"],
.multiselect-content input[type="checkbox"] {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	vertical-align: middle;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

	table.simple input[type="checkbox"]:hover,
	.multiselect-content label:hover input[type="checkbox"] { border-color: #0093ff; }

	table.simple input[type="checkbox"]:focus-visible,
	.multiselect-content input[type="checkbox"]:focus-visible {
		outline: none;
		border-color: #0093ff;
		box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.28);
	}

	table.simple input[type="checkbox"]::before,
	.multiselect-content input[type="checkbox"]::before {
		content: "";
		position: absolute;
		top: 46%;
		left: 50%;
		width: 0.28rem;
		height: 0.55rem;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: translate(-50%, -55%) rotate(45deg) scale(0);
		transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
	}

	table.simple input[type="checkbox"]:checked,
	.multiselect-content input[type="checkbox"]:checked {
		background: #0093ff;
		border-color: #0093ff;
	}

	table.simple input[type="checkbox"]:checked::before,
	.multiselect-content input[type="checkbox"]:checked::before {
		transform: translate(-50%, -55%) rotate(45deg) scale(1);
	}

	table.simple {

	}

.button-selector {
	display: flex;
	flex-flow: row wrap;
	border: 1px solid #ccc;
	border-radius: 0.4rem;
	overflow: hidden;
	margin-top: -1rem;
}

	.button-selector .button-item {
		text-align: center;
		cursor: pointer;
		padding: 1rem;
		border-left: 1px dotted #ccc;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.button-selector .button-item:nth-child(1) {
			border-left: 0;
		}

	.button-selector .button-item:hover {
		background: #eee;
	}

	.button-selector .button-item.active {
		background: #B3BFA2;
		color: #fff;
	}

	.button-selector.four-options .button-item { width: 25%; }
	.button-selector.three-options .button-item { width: 33.33%; }
		@media (min-width: 650px) {
			.button-selector.three-options.shorter { width: 75%; }
		}

	.button-selector .button-item input {
		display: none;
	}

.haircolor-selector-wrapper {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 4em;
}

	.haircolor-selector-item {
		width: 50%;
		text-align: center;
		padding: 1rem;
		background: #fff;
		cursor: pointer;
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		@media (min-width: 500px) {
			.haircolor-selector-item {
				width: 33.33%;
			}
		}

		@media (min-width: 700px) {
			.haircolor-selector-item {
				width: 25%;
			}
		}

		.haircolor-selector-item i.icon {
			width: 2em;
		    height: 2em;
		    border-radius: 100%;
		    display: block;
		    margin: 0 auto 1em auto;
		    background: #fff url(img/checkmark.png) no-repeat center;
		    box-shadow: 0 0 10px rgba(0,0,0,0.3);
		    background-size: 50%;
		    position: absolute;
		    left: -0.5em;
		    top: 50%;
		    margin-top: -1em;
		    transform: scale(0.6);
		    opacity: 0;
		    z-index: 9;
		    -webkit-transition: all 0.2s ease-in-out;
		    -moz-transition: all 0.2s ease-in-out;
		    -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
		}

			.haircolor-selector-item.active i.icon {
				opacity: 1;
				transform: scale(1);
			}

		.haircolor-selector-item .hair-image {
			width: 75%;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #fff;
			border-radius: 100%;
			margin: 0 auto;
			-webkit-transition: all 0.3s ease-in-out;
		    -moz-transition: all 0.3s ease-in-out;
		    -o-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
		}

			.haircolor-selector-item .hair-image::before {
				content: "";
				display: block;
				padding-top: 100%;
			}

			.haircolor-selector-item:hover .hair-image {

			}

			.haircolor-selector-item.active .hair-image {
				box-shadow: 0 0 1em rgba(0,0,0,0.1);
				transform: scale(0.875);

			}

		.haircolor-selector-item .hair-title {
			margin: 0;
		}

		.haircolor-selector-item:hover {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
		}

		.haircolor-selector-item.active {
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			z-index: 9;
			background: rgb(252,252,252); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
		}

	@media (max-width: 499px) {
		.haircolor-selector-item {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-last-child(2),
		.haircolor-selector-item:nth-last-child(3) {
			border-bottom: none;
		}

		.haircolor-selector-item:nth-child(odd) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 500px) and (max-width: 699px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(4),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(7),
		.haircolor-selector-item:nth-child(8) {
			border-right: 1px dotted #ccc;
		}
	}

	@media (min-width: 700px) {
		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(4) {
			border-bottom: 1px dotted #ccc;
		}

		.haircolor-selector-item:nth-child(1),
		.haircolor-selector-item:nth-child(2),
		.haircolor-selector-item:nth-child(3),
		.haircolor-selector-item:nth-child(5),
		.haircolor-selector-item:nth-child(6),
		.haircolor-selector-item:nth-child(7) {
			border-right: 1px dotted #ccc;
		}
	}

.skincolor-overview-item {
	width: 20%;
	padding: 1em;
	background: #eee;
	margin-bottom: 4em;
	cursor: pointer;
}

	.skincolor-overview-item:hover {
		background: #ccc;
	}

.skincolor-columns {
	display: flex;
	/* flex-direction: row; */
	/* justify-content: space-between; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	width: 95%;
	margin: 0em auto;
}

.skincolor-group {
	width: 16.66%;
	float: left;
	position: relative;
	padding: 0;
}

	.group-fair-red,
	.group-fair-neutral,
	.group-fair-yellow,
	.group-fair-deepyellow {
		display: block;
	}

	.group-fair-red {
		margin-left: 16.66%;
	}

		.group-fair-red .skincolor-item {
			position: absolute;
			bottom: 0;
			right: 0;
		}

	.group-brown-red {
		margin-left: 16.66%;
	}

	.group-fair-neutral {

	}

		.group-fair-neutral .skincolor-item:first-child {
			margin-left: 50%;
		}

	.group-dark-red {
		width: 33.32%;
		padding-left: 8.33%;
	}

		.group-dark-red .skincolor-item {
			width: 33.33%;
		}

	.group-bronze-deepred {
		width: 8.33%;
		margin-left: 8.33%;
	}

		.group-bronze-deepred .skincolor-item {
			width: 100%;
		}

	.xAxis-Scroll {
		background: #fff;
		box-shadow: 0 0 0 rgba(0,0,0,0.3);
		width: 100%;
		margin: 0 auto;
		position: fixed;
		padding: 0 32px;
		top: 0;
		z-index: 99;
		height: 4.5em;
		transform: translateY(-150%);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.xAxis-Scroll.show {
			transform: translateY(0);
			box-shadow: 0 0 1em rgba(0,0,0,0.3);
		}

		.xAxis-Scroll .xAxis {
			margin-top: 2em;
			margin-bottom: 2em;
			width: 79.1%;
			margin-left: 18.3%;
		}

	.xAxis {
		margin-top: 4em;
		margin-bottom: 4em;
		width: 83.34%;
		margin-left: 16.66%;
	}

		.xAxis i.icon-info {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -3em;
			margin-left: -1em;
			opacity: 1;
			z-index: 9;

		}

			.xAxis i.icon-info:hover {
				transform: scale(1.2);
			}

		.xAxis .half {
			width: 50%;
			float: left;
			position: relative;
		}

		.xAxis .label-yellow,
		.xAxis .label-red {
			width: 40%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label-neutral {
			width: 20%;
			float: left;
			position: relative;
			height: 5px;
			overflow: visible;
		}

		.xAxis .label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background: #fff;
			padding: 0.5em;
			cursor: pointer;
			text-align: center;
		}

		.xAxis .line {
			height: 1px;
			left: 0;
			margin-top: 1px;
			width: 100%;
			background: #ccc;
		}

			.xAxis .line::before {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-top: -15px;
			}

			.xAxis .line::after {
				content: "";
				width: 1px;
				height: 31px;
				position: absolute;
				right: -1px;
				background: #ccc;
				margin-top: -15px;
			}

	.group-label {

	}

		.group-label .line {
			position: absolute;
			height: 100%;
			left: 30%;
			width: 1px;
			background: #ccc;
		}

			.group-label .line::before {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				top: 0;
				background: #ccc;
				margin-left: -15px;
			}

			.group-label .line::after {
				content: "";
				width: 31px;
				height: 1px;
				position: absolute;
				bottom: -1px;
				background: #ccc;
				margin-left: -15px;
			}

		.group-label .image {
			position: absolute;
			width: 60%;
			left: 30%;
			top: 50%;
			transform: translate(-50%, -55%);
			cursor: pointer;
		}

			.group-label .image img {
				width: 100%;
				height: auto;
				border-radius: 100%;
				border: 3px solid #fff;
				box-shadow: 0 0 1em rgba(0,0,0,0.2);
			}

		.group-label .label {
			position: absolute;
			width: 100%;
			height: 1.5em;
			line-height: 1.5em;
			background: #fff;
			text-align: center;
			margin-top: 0.5em;
		}

.skincolor-item {
	/* width: 100px; */
	text-align: center;
	width: 50%;
	float: left;
	position: relative;
	cursor: pointer;
	border-color: #fff;
	border: 1px solid #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.skincolor-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 100%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincolor-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}

	.skincolor-item:hover,
	.skincolor-item.active {
		transform:scale(1.5);
		z-index: 9;
		border: 2px solid #fff;
		cursor: pointer;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		opacity: 1 !important;
	}

		.skincolor-item:hover {
			z-index: 20;
		}

		.skincolor-item.disabled {
			opacity: 0.6;
		}

		.skincolor-item.fully-disabled {
			opacity: 0.15;
			pointer-events: none;
		}

		.skincolor-item.fully-disabled:not(.active):hover {
			transform:scale(1);
			z-index: 0;
			border: 1px solid #fff;
			box-shadow: 0 0 0;
			opacity: 0.2 !important;
		}

		.skincolor-item.fully-disabled.active {
			pointer-events: all
		}

		.skincolor-item.fully-disabled.secondary-active,
		.skincolor-item.fully-disabled.active-skincolor.secondary-active,
		.skincolor-item.fully-disabled.active-tone.secondary-active {
			opacity: 1 !important;
		}

		.skincolor-item.fully-disabled.active-skincolor,
		.skincolor-item.fully-disabled.active-tone {
			opacity: 0.3 !important;
		}

	.skincolor-item-range {
		width: 100%;
		height: 100%;
		position: absolute;
		pointer-events:none;
		box-sizing: content-box;
		opacity: 0;
	}

		.skincolor-item:hover .skincolor-item-range {
			transform:scale(2.02);
			/* border: 1px solid #000; */
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
		}

.step-description {
	margin-bottom: 4em;
	color: #666;
}

.skincare-need-item,
.hair-need-item {
	width: 50%;
	line-height: 140%;
	text-align: center;
	cursor: pointer;
	background: #fff;
	border: 1px solid #fff;
	border-bottom: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	font-weight: 400;
	position: relative;
	word-wrap: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: #555;
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (max-width: 649px) {
		.skincare-need-item:nth-child(2n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item:nth-child(2n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1) {
			border-bottom: none;
		}
	}

	@media (min-width: 650px) and (max-width: 999px) {
		.skincare-need-item,
		.hair-need-item {
			width: 33.33%;
		}

		.skincare-need-item:nth-child(3n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1) {
			border-bottom: 0;
		}
		.skincare-need-item:nth-last-child(2) {
			border-bottom: 1px dotted #ccc;
		}

		.hair-need-item:nth-child(3n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2) {
			border-bottom: 0;
		}

	}

	@media (min-width: 1000px) {
		.skincare-need-item {
			width: 25%;
		}

		.skincare-need-item:nth-child(4n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2) {
			border-bottom: none;
		}

		.hair-need-item {
			width: 25%;
		}

		.hair-need-item:nth-child(4n) {
			border-right: 0;
		}

		.hair-need-item:nth-last-child(1),
		.hair-need-item:nth-last-child(2),
		.hair-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}

	/*
@media (min-width: 1400px) {
		.skincare-need-item {
			width: 20%;
		}

		.skincare-need-item:nth-child(5n) {
			border-right: 0;
		}

		.skincare-need-item:nth-last-child(1),
		.skincare-need-item:nth-last-child(2),
		.skincare-need-item:nth-last-child(3) {
			border-bottom: none;
		}
	}
*/

	.skincare-need-item:before,
	.hair-need-item:before {
    	content: "";
	    float: left;

	    /* essentially the aspect ratio. 100% means the
	       div will remain 100% as tall as it is wide, or
	       square in other words.  */
	    padding-bottom: 50%;
	    cursor: pointer;
	}
	/* this is a clearfix. you can use whatever
	   clearfix you usually use, add
	   overflow:hidden to the parent element,
	   or simply float the parent container. */
	.skincare-need-item:after,
	.hair-need-item:after {
	    content: "";
	    display: table;
	    clear: both;
	    cursor: pointer;
	}

	.skincare-need-item:hover,
	.hair-need-item:hover {
		background: #f8f8f8;
		/* z-index: 9; */
	}

	.skincare-need-item.active,
	.hair-need-item.active {
		color: #0093ff;
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	}

	.skincare-need-item input,
	.hair-need-item input {
		display: none;
	}

	.skincare-need-item i.icon,
	.hair-need-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skincare-need-item.active i.icon,
		.hair-need-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

		.skincare-need-item .inner,
		.hair-need-item .inner {
			position: absolute;
			top: 50%;
			width: 100%;
			text-align: center;
			left: 0;
			padding: 0 2em;
			transform: translate3d(0, -50%, 0);
		}

.default-ui.noUi-horizontal {
	height: 22px !important;
}

.default-ui .noUi-handle {
	width: 40px;
	height: 40px;
	top: -10px;
	left: -20px;
	border-radius: 100%;
	border: 2px solid #fff;
	box-shadow: none;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	.default-ui .noUi-handle:before,
	.default-ui .noUi-handle:after {
		display: none;
	}

	.default-ui .noUi-handle.noUi-active {
		box-shadow: 0 0 1.5em rgba(0,0,0,0.2);
		transform: scale(1.2);
	}

.default-ui .noUi-connect {
	background: #B3BFA2;
}

.default-ui .noUi-marker-horizontal.noUi-marker {
	width: 1px;
}

#plane-slider-handles .noUi-handle {
	background: #fff url(img/plane_handle.png) no-repeat center;
	background-size: 70%;
}

#sun-slider-handles .noUi-handle {
	background: #fff url(img/sun_handle.png) no-repeat center;
	background-size: 70%;
}

#stress-slider-handles .noUi-handle {
	background: #fff url(img/stress_handle.png) no-repeat center;
	background-size: 70%;
}

#sleep-slider-handles .noUi-handle {
	background: #fff url(img/sleep_handle.png) no-repeat center;
	background-size: 80%;
}

.status {
	color: #333;
	background: #ccc;
	padding: 0.4em;
	border-radius: 3px;
	line-height: 90%;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
}

	.status.status-dot {
		padding: 0;
		border: 2px solid #fff;
		width: 12px;
		height: 12px;
		margin: 2px;
		border-radius: 100%;
	}

	@media (max-width: 1200px) {
		.status .status-label {
			display: none;
		}

		.status:hover .status-label {
			display: inline;
		}
	}

	a.status {
		text-decoration: none;
	}

	.status-submitted,
	a.status-submitted {
		color: #fff;
		background: #4d9acb;
	}

	.status-approved,
	.status-live,
	a.status-approved {
		color: #fff;
		background: #5ac675;
	}

	.status-edited,
	a.status-edited {
		color: #fff;
		background: #a3cd5f;
	}

	.status-created,
	a.status-created {
		color: #fff;
		background: #e49e12;
	}

	.status-inci-only,
	a.status-inci-only {
		color: #fff;
		background: #6f6f78;
	}

	.status-archived,
	a.status-rejected {
		color: #fff;
		background: #d03e54;
	}

	.status-permission-view {
		color: #fff;
		background: #4d9acb;
	}

	.status-permission-limited-upload {
		color: #fff;
		background: #a3cd5f;
	}

	.status-permission-upload {
		color: #fff;
		background: #5ac675;
	}

	.status-permission-translation {
		color: #fff;
		background: #ef6d53;
	}

	.status-permission-custom {
		color: #8f8f8f;
		background: #eee;
	}

.makeup-finish-item,
.makeup-coverage-item {
	width: 50%;
	margin-bottom: 4em;
	cursor: pointer;
}

	@media (min-width: 600px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1000px) {
		.makeup-finish-item,
		.makeup-coverage-item {
			width: 20%;
		}
	}

	.makeup-finish-item:hover,
	.makeup-coverage-item:hover {
		z-index: 10;
	}

	.makeup-finish-item.active,
	.makeup-coverage-item.active {
		z-index: 20;
	}

	.makeup-finish-image-holder,
	.makeup-coverage-image-holder {
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item img.makeup-finish,
	.makeup-coverage-item img.makeup-coverage {
		width: 80%;
		margin: 0 auto;
		height: auto;
		display: block;
		/* border-radius: 0.75em; */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.makeup-finish-item:hover .makeup-finish-image-holder,
	.makeup-coverage-item:hover .makeup-coverage-image-holder {
		/* transform: rotateX(5deg) rotateZ(5deg) scale(1.05) !important; */
		transform: scale(1.05) !important;
		z-index: 9;
		opacity: 1 !important;
	}

	.makeup-finish-item.active .makeup-finish-image-holder,
	.makeup-coverage-item.active .makeup-coverage-image-holder {
		transform: rotateX(5deg) rotateZ(-7deg) scale(1.2) !important;
		/* transform: scale(1.2) !important; */
	}

	.makeup-finish-item.disabled .makeup-finish-image-holder,
	.makeup-coverage-item.disabled .makeup-coverage-image-holder {
/* 		opacity: 0.5; */
		transform: scale(0.8);
	}

	.makeup-finish-item:hover img.makeup-finish,
	.makeup-finish-item.active img.makeup-finish,
	.makeup-finish-item:hover img.makeup-finish,
	.makeup-coverage-item.active img.makeup-coverage {
		box-shadow: 0 0 1em rgba(0,0,0,0.4);
	}

	.makeup-finish-item img.makeup-finish-skin-closeup {
		width: 60%;
		height: auto;
		display: block;
		border-radius: 100%;
		border: 3px solid #fff;
		box-shadow: 0 0 1em rgba(0,0,0,0.2);
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30%;
		z-index: 9;
		transform: translate(0, 50%);
		background: #fff;
	}

	.makeup-finish-item h3.title,
	.makeup-coverage-item h3.title {
		font-weight: 700;
		font-size: 1em;
		text-align: center;
		z-index: 10;
		position: absolute;
		width: 80%;
		display: block;
		left: 10%;
		padding: 0.5em 0;
		margin: 0;
		/* border-radius: 0.75em 0.75em 0 0; */
		top: 0;
		background: rgba(255,255,255,0.4);
		color: #111;
	}

.eye-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.eyecolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

.hair-circle-wrapper {
	position: relative;
	width:100%;
	max-width: 400px;
	margin: 0 auto 4em auto;
}

	.haircolor-closeup {
		position: absolute;
		width: 72%;
		height: 72%;
		left: 14%;
		top: 14%;
		border-radius: 100%;
		pointer-events:none;
		box-shadow: 0 0 2em rgba(0,0,0,0.4);
		border: 2px solid #fff;
		background: #fff;
	}

@media (min-width: 700px) {
	.eye-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-bottom: 0;
	}

	.hair-circle-wrapper {
		width:45%;
		max-width: none;
		float:left;
		margin-left: 10%;
	}

	.color-wheel-wrap {
		max-width: 1000px;
		margin: 0 auto;
	}
}

.skintypemodel-holder {
	/* border-bottom: 1px solid #A26345; */
	position: relative;
	overflow: visible;
}

	.skintypemodel-holder img.model {
		width: 80%;
		height: auto;
		border-radius: 0 0 45% 45%;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.model {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.model {
			width: 33.33%;
			float: left;
		}
	}

	.skintypemodel-holder img.mask {
		width: 80%;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
	}

	@media screen and (min-width: 450px) {
		.skintypemodel-holder img.mask {
			width: 50%;
		}
	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder img.mask {
			width: 33.33%;
		}
	}

	.skintypemodel-holder .columns {

	}

	@media screen and (min-width: 600px) {
		.skintypemodel-holder .columns {
			/* position: absolute; */
			float: right;
			width: 60%;
			top: 0;
			right: 0;
		}
	}

	@media screen and (min-width: 1000px) {
		.skintypemodel-holder .columns {
			/*
position: absolute;
			top: 0;
			right: 0;
*/
		}
	}

	@media screen and (min-width: 1200px) {
		.skintypemodel-holder .columns {
			width: 50%;
			/*
			top: 50%;
			transform: translateY(-50%);
			*/
		}
	}

.skintype-item {
	position: relative;
	font-size: 12px;
	width: 100%;
	cursor: pointer;
	padding: 1em 1em 1em 2.5em;
	background: #fff;
	margin: 0em 0;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	@media (min-width: 600px) {
		.skintype-item { font-size: 14px; }
	}

	@media (min-width: 800px) {
		.skintype-item { font-size: 15px; }
	}

	@media (min-width: 1000px) {
		.skintype-item { font-size: 16px; }
	}

	@media screen and (min-width: 790px) {
		.skintype-item {
			width: 50%;
		}

		.skintype-item:nth-child(2n-1) {
			border-right: 1px dotted #ccc;
		}
	}

	.skintype-item:last-child {
		border-bottom: 0;
	}

	.skintype-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-item.active {
		/* transform: scale(1.1); */
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.skintype-item.disabled {
		opacity: 0.6;
	}

		.skintype-item.disabled p {
			color: #999;
		}

	.skintype-item h3 {
		margin-top: 1em;
		font-size: 1em;
	}

	.skintype-item p {
		margin-bottom: 1em;
		color: #555;
		font-size: 0.9em;
	}

	.skintype-item i.icon {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skintype-item.active i.icon {
			opacity: 1;
			transform: scale(1);
		}

.product-preference-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 1.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.product-preference-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.product-preference-item.active {
		padding-left: 3em;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	}

	.product-preference-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		opacity: 0;
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.product-preference-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.product-preference-item h3 {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

		.product-preference-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.product-preference-item p {
		margin-bottom: 0;
	}

.skintype-options {
	margin-top: -1px;
	border-top: 5px solid #eee;
	z-index: 1;
	    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.skintype-option-item {
	cursor: pointer;
	padding: 2em 1.5em 2em 2.5em;
	background: #fff;
	margin: 0em 0;
	position: relative;
	border-bottom: 1px dotted #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.skintype-option-item:last-child {
	    border-bottom: 0;
	}

	@media screen and (min-width: 790px) {
		.skintype-option-item {
			width: 50%;
		}

		.skintype-option-item:nth-child(2n-1) {
		    border-right: 1px dotted #ccc;
		}

		.skintype-option-item {
			border-bottom: 0;
		}
	}

	.skintype-option-item:hover {
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 10;
		opacity: 1 !important;
	}

	.skintype-option-item.active {
		padding-left: 2.5em;
		/* box-shadow: 0 0 1em rgba(0,0,0,0.1); */
		z-index: 9;
		box-shadow: 0 0 1em rgba(0,0,0,0.1);
		z-index: 9;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f8f8f8+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(248,248,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	}

	.skintype-option-item i.icon-active {
		width: 2em;
		height: 2em;
		border-radius: 100%;
		display: block;
		margin: 0 auto 1em auto;
		background: #fff url(img/checkmark.png) no-repeat center;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		background-size: 50%;
		opacity: 0;
		position: absolute;
		left: -0.5em;
		top: 50%;
		margin-top: -1em;
		transform: scale(0.6);
		z-index: 9;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

		.skintype-option-item.active i.icon-active {
			opacity: 1;
			transform: scale(1);
		}

	.skintype-option-item h3 {
		margin-top: 0;
		font-size: 1em;
		margin-bottom: 1em;
		color: #111;
	}

		.skintype-option-item h3 .icon {
			margin-bottom: -0.3em;
			margin-left: 0.5em;
		}

	.skintype-option-item p {
		margin-bottom: 0;
		font-size: 0.9em;
		color: #555;
	}

	.skintype-option-item.active p {
		color: #555;
	}

i.icon-info {
	width: 2rem;
	height: 2rem;
	border-radius: 100%;
	display: inline-block;
	background: #fff url(img/icon_info.png) no-repeat center;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	background-size: 50%;
	opacity: 1;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	i.icon-info:hover {
		transform: scale(1.2);
	}

.monospace {
	font-family: monospace;
}

.brand-link {
	display: block;
    padding: 2em 1.5em 2em 0;
    background: #fff;
    margin: 0em 0;
    position: relative;
    border-bottom: 1px dotted #ccc;
    font-weight: 600;
    line-height: 120%;
    font-size: 1.4em;
    text-decoration: none;
    font-weight: normal;
}

	.brand-link a {
		text-decoration: none;
	}

	.brand-link:hover a {
		text-decoration: underline;
	}

.product-item {
	width: 100%;
	padding: 0;
	margin: 1em 0;
	z-index: 0;
	background: #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

	@media (min-width: 600px) {
		.product-item {
			width: 50%;
		}
	}

	@media (min-width: 1000px) {
		.product-item {
			width: 33.33%;
		}
	}

	@media (min-width: 1400px) {
		.product-item {
			width: 25%;
		}
	}

	.product-item:hover {
		transform: scale(1.2);
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 9;
		position: relative;
	}

	.product-item.no-zoom:hover {
		transform: scale(1);
	}

	.product-item .color-check {
		display: none;
	}

	.product-item:hover .color-check {
		display: block;
	}

	.product-item:hover .color-check a {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		background: url(img/colorfan.svg) no-repeat center;
		background-size: contain;
		text-indent: -1000px;
		overflow: hidden;
	}

	.product-item .inner {
		height: 100%;
		padding: 1rem;
		z-index: 2;
		background: #fff;
		position: relative;
	}

	.product-item .status-dots {
		width: 100%;
		top: 170px;
		left: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.product-item .thumbnail {
		height: 150px;
		width: 100%;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 1em;
	}

	.product-item .thumbnail.no-image {
		position: relative;
	}

	.product-item .thumbnail.no-image::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		height: 80%;
		aspect-ratio: 1 / 1;
		border: 2px dashed #ccc;
		border-radius: 1em;
	}

	.product-item .title {
		text-align: center;
		line-height: 140%;
	}

	.product-item ul.variants {
		position: absolute;
		width: 100%;
		background: #eee;
		display: none;
		left: 0;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		z-index: 1;
		font-size: 13px;
		color: #666;
	}

		.product-item:hover ul.variants {
			display: block;
		}

			.product-item ul.variants li {
				border-bottom: 1px dotted #ccc;
				padding: 0.5rem;
			}

			.product-item ul li .color-preview {
				display: inline-block;
				width: 1em;
				height: 1em;
				border-radius: 100%;
				background: #ccc;
				margin-right: 0.5em;
				margin-bottom: -0.1em;
			}

			.product-item ul li .weight {
				margin-left: 1em;
			}

			.product-item ul li .status {
				margin-left: 1em;
				font-family: monospace;
				float: right;
				position: absolute;
				right: 0.5em;
			}

			.product-item ul li .actions {
				float: right;
				text-align: right;
				opacity: 0;
			}

				.product-item ul li:hover {
					background: #f8f8f8;
				}

				.product-item ul li:hover .status {
					display: none;
				}

				.product-item ul li:hover .actions {
					opacity: 1;
				}

			.product-item ul li .icon {
				width: 1.2em;
				height: 1.2em;
				overflow: hidden;
				text-indent: -1000px;
				display: inline-block;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 90% auto;
				margin-left: 0.5em;
			}

				.product-item ul li .icon.icon-edit { background-image: url(img/edit-mini.svg); }
				.product-item ul li .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
				.product-item ul li .icon.icon-delete { background-image: url(img/delete-mini.svg); }
				.product-item ul li .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
				.product-item ul li .icon.icon-preview { background-image: url(img/preview-mini.svg); }
				.product-item ul li .icon.icon-insight { background-image: url(img/insight-mini.svg); }

.line-item {
	padding: 1.2em 1em;
	border-bottom: 1px dotted #ccc;
	z-index: 0;
	display: flex;
	flex-flow: row wrap;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.line-item .group {
		margin-right: 1em;
	}

	.line-item:hover {
		z-index: 1;
		background: #f8f8f8;
	}

	.styling-data .line-item:hover {
		background: rgba(0, 147, 255, 0.1);
	}

	.line-item .ID {
		width: 4.5rem;
	}

	.line-item .questionnaire-icon-holder {
		width: 2.5rem;
	}

	.line-item .questionnaire-icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.7rem;
		position: absolute;
		transform:translateY(-15%);
		border-radius: 0.15rem;
	}

	.line-item .title {
		font-weight: bold;
		flex: 1;
		line-height: 90%;
	}

	.line-item .fragrance-note-name,
	.line-item .fragrance-note-id,
	.line-item .fragrance-note-group,
	.line-item .fragrance-note-has-image,
	.line-item .fragrance-note-actions {
		flex: 2;
	}

	.line-item .fragrance-note-name {
		flex: 4;
	}

	.line-item .fragrance-note-has-image {
		flex: 1;
	}

	.line-item .fragrance-note-id {
		width: 4.5rem;
		flex: none;
	}

	.line-item .fragrance-note-actions {
		width: 5rem;
		flex: none;
		text-align: right;
	}

	.line-item .actions {
		text-align: right;
		width: 40%;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		padding: 0 1em;
	}

	.line-item .icon,
	.line-item .status-icon {
		width: 1.2em;
		height: 1.2em;
		overflow: hidden;
		text-indent: -1000px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 90% auto;
		margin-left: 0.5em;
	}

		.line-item .status-icon {
			margin-left: 0;
			margin-right: 0.5em;
		}

		.line-item .icon.icon-edit { background-image: url(img/edit-mini.svg); }
		.line-item .icon.icon-duplicate { background-image: url(img/duplicate-mini.svg); }
		.line-item .icon.icon-delete { background-image: url(img/delete-mini.svg); }
		.line-item .icon.icon-missing-ingredients { background-image: url(img/ingredients-mini.svg); }
		.line-item .icon.icon-view { background-image: url(img/folder-mini.svg); }
		.line-item .icon.icon-user { background-image: url(img/user-mini.svg); }

		.line-item.is-processing .status-icon { background-image: url(img/loading.svg); }
		.line-item.status-added .status-icon { background-image: url(img/reasons-why-icons/check.svg); background-size: contain }
		.line-item.status-rejected .status-icon { background-image: url(img/reasons-why-icons/cross.svg); background-size: contain }

		.line-item.status-rejected {
			background: rgba(154, 54, 54, 0.1)
		}

		.list-loader {
			display: flex;
			align-items: center;
			display: block;
			padding-left: 1.7em;
			position: relative;
			margin-top: 1em;
		}

			.list-loader::before {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1.7em;
				height: 1.7em;
				background-image: url(img/loading.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% auto;
			}

	.line-item.head-line {
		pointer-events: none;
		/* Same ground as the filter strip above it, so a list reads as one block of chrome rather
		   than two greys. Was an inline #f4f4f4 repeated across nine view files. */
		background: #f3f5f7;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

.account-legal-links {
	margin: 3em 0 0 0;
	padding: 3em 0 0 0;
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid #ccc;
}

	.account-legal-links a {
		display: inline-block;
		margin: 0 2em 0 0;
	}

		.account-legal-links a::before {
			content: "";

		}

.js-checkbox-activator {
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	border: 2px solid #ccc;
	display: inline-block;
	cursor: pointer;
	position: relative;
	transition: all 0.1s ease-in-out;
}

	.js-checkbox-activator::before {
		content: "";
		position: absolute;
		top: 20%;
		left: 20%;
		width: 60%;
		height: 60%;
		background: #fff;
		background-size: contain;
		transition: all 0.1s ease-in-out;
		transform: scale(0);
	}

	.js-checkbox-activator.checked {
		border: 2px solid #0093ff;
	}

		.js-checkbox-activator.checked::before {
			background: #0093ff;
			transform: scale(1);
		}

	.js-checkbox-activator input {
		pointer-events: none;
		opacity: 0;
		cursor: pointer;
	}

.smt-preview {
	width: 100%;
	max-width: 800px;
	box-shadow: 0 0 1em rgba(0,0,0,0.3);
	border-radius: 0.5em;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 9;
	background: #fff;
	display: flex;
	flex-flow: row wrap;
}

	.smt-preview .smt-preview-product {
		width: 40%;
		padding: 2em;
	}

	.smt-preview .smt-preview-title {
		font-size: 1.2em;
		line-height: 120%;
		font-weight: 400;
		text-align: center;
		padding: 1em 0 0.5em 0;
	}

	.smt-preview .smt-preview-subtitle {
		color: #777;
		padding: 0;
		line-height: 120%;
		font-size: 1em;
		text-align: center;
	}

	.smt-preview .smt-preview-product-image {
		position: relative;
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}

		.smt-preview .smt-preview-product-image::before {
			content: "";
			position: relative;
			display: block;
			padding-top: 66%;
		}

	.smt-preview .smt-preview-match {
		width: 60%;
		background: #f8f8f8;
		border-left: 1px solid #ccc;
		padding: 2em;
		border-radius: 0 0.5em 0.5em 0;
	}

		.smt-preview .smt-preview-match h4 {
			font-weight: bold;
		}

.smt-preview .smt-match-bar {
	margin: 2em 0 0.5em 0;
}

.smt-preview .smt-match-bar-label {
	padding: 0;
	position: relative;
	transform: none;
	top: 0;
	color: #333;
	background: transparent;
}

.smt-seal {
	width: 20em;
	height: 20em;
	top: -2em;
	right: -2em;
	border-radius: 100%;
	padding: 1px;
	opacity: 0.1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-100%);
	z-index: 0;
}

hr {
	height: 1px;
	width: 100%;
	margin: 1em 0;
	border: 0;
	background: #999;
}

.translation-source {
	color: #999;
	font-size: 12px;
	font-weight: 600;
}

.recent-activity { color: #000; }
.no-recent-activity { color: #999; }

.log-entry {
	border-bottom: 1px dotted #ccc;
	padding: 0.5rem 0 1rem 0;
	position: relative;
	padding-left: 170px;
	font-size: 0.9rem;
}

	.log-entry .log-meta {
		color: #999;
		font-family: monospace;
		font-size: 0.9rem;
		display: flex;
		margin-bottom: 0.5rem;
	}

		.log-entry .log-meta span {
			margin-right: 2rem;
		}

		.log-entry .log-meta span.date {
			position: absolute;
			left: 0;
		}

	.log-entry .log-data {
		display: flex;
	}

		.log-entry .log-data span {
			margin-right: 2rem;
		}

		.log-entry .log-data span.value {
			position: absolute;
			left: 0;
		}

			.log-entry .log-data span.value.value-deleted {
				color: #b93434;
			}

			.log-entry .log-data span.value.value-updated {
				color: #3267c1;
			}

			.log-entry .log-data span.value.value-created {
				color: #34b939;
			}

			.log-entry .log-data span.note {
				margin-right: 1rem;
			}

			.log-entry .log-data span.field {
				margin-right: 1rem;
				border: 1px solid #ccc;
				background: #eee;
				color: #777;
				font-size: 0.7rem;
				padding: 0.3rem;
				position: relative;
				margin-top: -0.3rem;
			}

				.log-entry .log-data span.field:empty {
					display: none;
				}

				.log-entry .log-data span.field::before {
					content:"db field: ";
					position: relative;
				}

/* Icons */
i.icon {
	width: 1em;
	height: 1em;
	display: inline;
	margin-right: 0.25em;
}

	i.icon::before {
		content: "";
		width: 1em;
		display: inline-block;
	}

i.icon.icon-back {
	background: url(img/back.svg) no-repeat center;
	background-size: 60% auto;
}

.pass-graybar {
	height:5px;
	background-color:#eee;
	width:100%;
	position:relative;
	margin-bottom: 5px;
	margin-top: -6px;
}

.pass-colorbar {
	height:5px;
	background-image:url(img/passwordstrength.jpg);
	position:absolute;
	top:0;left:0
}

.pass-percent,
.pass-text {
	margin: 0;
	color: #777777;
	font-size: 0.875em;
	margin-bottom: 0.25em;
	font-weight: 400;
}

.pass-text {
	min-height: 2.5rem;
	display: block;
}

.pass-percent {
	margin-right:5px
}

/* Insights */

.insight-title {
	font-weight: bold;
	margin: 2.5rem 0 1rem 0;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
}

.insight-group {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 1px dotted #ccc;
}

	.insight-item {
		width: 25%;
		border-right: 1px dotted #ccc;
		padding: 2rem 2rem 2rem 2rem;
		position: relative;
	}

	.insight-item.double {
		width: 50%;
	}

	.insight-item.full {
		width: 100%;
	}

	.insight-item.half {
		width: 50%;
	}

	.insight-item h6 {
		width: 100%;
		margin: 0 0 1em 0;
	}

	.insight-item:last-child {
		border-right: 0;
	}

	.insight-item:first-child {
		padding-left: 0;
	}

	.insight-item .value {
		font-weight: bold;
		font-size: 3.5rem;
		margin-bottom: 0.5rem;
	}

	.insight-item .label {
		font-weight: normal;
		font-size: 0.8rem;
		text-transform: uppercase;
		line-height: 120%;
	}

	.insight-item .direction {
		display: block;
		position: absolute;
		width: 2rem;
		height: 2rem;
		border-radius: 100%;
		right: 2rem;
		top: 2rem;
		background: #ccc url(img/arrow-insight.svg) no-repeat center;
		background-size: 50% auto;
	}

		.insight-item .direction.direction-none { background-color:#e49e12; }
		.insight-item .direction.direction-up { background-color:#5ac675; transform: rotate(-45deg); }
		.insight-item .direction.direction-down { background-color:#d03e54; transform: rotate(45deg); }

.flex {
	display: flex;
	flex-flow: row wrap;
}

.ingredients-by-group {
	width: 50%;
	padding-left: 2rem;
	padding-bottom: 2rem;
}

.questionnaire-preview {
	width: 100%;
	position: relative;
}

	.questionnaire-preview::before {
		content: "";
		display: block;
		padding-top: 56%;
	}

	.questionnaire-preview iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0 0 1rem rgba(0,0,0,0.2);
		transform: scale(0.6);
		transform-origin: top right
	}

.incianalyzer-holder {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}

	.incianalyzer-preview {
		width: 100%;
		max-width: 1000px;
		display: block;
		padding: 2em;
	}

	@media (min-width: 500px) {
		.incianalyzer-preview {
			display: flex;
			flex-flow: row wrap;
		}
	}

		.incianalyzer-product-image {
			width: 70%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			background-color: #fff;
			border: 1em solid #fff;
			border-radius: 1em;
			box-shadow: 0 0 1em rgba(0,0,0,0.1);
			margin: 0 auto 2em auto;
		}

		@media (min-width: 500px) {
			.incianalyzer-product-image {
				width: 40%;
				max-width: 300px;
				border-radius: 2em;
				margin: 0 0 2em 0;
			}
		}

		.incianalyzer-product-image::before {
			content: "";
			display: block;
			padding-bottom: 100%;
		}

	.incianalyzer-product-info {
		width: 100%;
		display: block;
	}

		@media (min-width: 500px) {
			.incianalyzer-product-info {
				width: auto;
				flex: 1;
				padding: 0 1em;
			}
		}

		@media (min-width: 800px) {
			.incianalyzer-product-info {
				padding: 0 2em;
			}
		}

	.incianalyzer-product-info h2 {
		font-weight: normal;
	}

	.incianalyzer-product-info h3 {
		font-size: 1em;
	}

		.incianalyzer-product-info h2 + h3 {
			margin-top: -1em;
		}

	.incianalyzer-incilist {
		display: block;
		line-height: 130%;
		font-size: 14px;
	}

	.incianalyzer-product-info .label {
		line-height: 130%;
		font-size: 14px;
		display: block;
		margin-bottom: 0.25rem;
		padding-top: 2rem;
	}

		.incianalyzer-incilist .inci {
			position: relative;
			display: inline-block;
		}

			.incianalyzer-incilist .inci .info {

				display: none;
			}

			.tooltipster-show {
				/* display: block; */
				min-width: 350px;
			}

			.tooltipster-show .info {
				color: #111;
				padding: 0;
				padding: 0;
				min-width: 250px;
			}

				.tooltipster-show .info h3 {
					margin-top: 0;
					min-width: 250px;
				}

				.tooltipster-show .info p.descr {
					font-size: 14px;
					line-height: 130%;
					color: #888;
					font-style: italic;
					font-family: 'Georgia', serif;
				}

				.tooltipster-show .info p {
					font-size: 14px;
					line-height: 130%;
				}

				.tooltipster-show .info ul {
					/* padding-left: 20px;
					list-style-type: disc; */
					display: block;
					padding:  0;
				}

					.tooltipster-show .info ul li {
						color: #111;
						font-size: 13px;
						line-height: 120%;
						border-top: 1px solid #ccc;
						border-bottom: 1px solid #ccc;
						padding: 0.2em 0;
						margin-top: -1px;
					}

					.tooltipster-show .copyright {
						display: block;
						position: absolute;
						bottom: 12px;
						font-size: 10px;
						line-height: 120%;
						color: #777;
					}

		.inci.has-info {
			border-bottom: 1px dotted #1e9bd9;
			cursor: pointer;
			transition: all 0.1s ease-in-out;
		}

			.inci.has-info:hover {
				color: #1e9bd9;
				border-bottom: 1px solid #1e9bd9;
			}

.questionnaire-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.25rem;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.5rem;
	text-align: center;
	display: flex;
	overflow: hidden;
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
}

.questionnaire-icon span {
	display: block;
	width: 8%;
	height: 100%;
}

.questionnaire-icon span.letter {
	width: 68%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ================================================================================================
   FORMS
   The app's form language: floating-label text fields, hints, checkboxes, the file input and the
   primary submit. Built on the ingredient editor and lifted here wholesale, so it is no longer that
   one screen's private styling — every `form.sectioned` gets it.

   Markup contract for a floating-label field:

       <div class="form-field-wrap field">
           <input type="text" class="text" id="name" placeholder=" ">
           <label for="name">Name</label>
       </div>

   Three things the markup has to get right:

     1. The label follows the input, so `:not(:placeholder-shown) + label` can reach it.
     2. Every input carries placeholder=" ", which is what that selector tests.
     3. .field holds the control and its label and NOTHING ELSE. The label is absolutely positioned
        at top: 50% of .field, so a hint or a button inside it makes the box taller than the input
        and drops the label onto the value. Hints go next to .field, not in it:

           <div class="form-field-wrap">
               <div class="field"> input + label </div>
               <p class="descr">Hint text.</p>
           </div>

   Textareas add `is-textarea` to the wrapper, selects add `is-select`, and a field in error adds
   `is-error`.
   ================================================================================================ */

/* The file input was the one native control left in the form. ::file-selector-button styles the
   button half without replacing the input, so the file picker still behaves like a file picker —
   the label-plus-hidden-input trick would have to reimplement the filename readout. */
.wrap form.sectioned input[type="file"] {
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 0.9rem;
	color: #6c6560;
	max-width: 100%;
}

	.wrap form.sectioned input[type="file"]::file-selector-button {
		margin-right: 0.75rem;
		padding: 0.7em 1.4em;
		border: 1px solid #ccc;
		border-radius: 4px;
		background: #fff;
		color: #4a423c;
		font-family: inherit;
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1.2;
		cursor: pointer;
		transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		            border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.wrap form.sectioned input[type="file"]:hover::file-selector-button {
		background: #f7f5f3;
		border-color: #b3aaa2;
	}

	.wrap form.sectioned input[type="file"]:focus-visible::file-selector-button {
		outline: 2px solid #0093ff;
		outline-offset: 2px;
	}

/* Standing labels — the ones that sit above a control rather than floating in it. */
.wrap form.sectioned .input-wrap > label,
.wrap form.sectioned .image-preview > label {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: 0.85rem;
	color: #6c6560;
}
@keyframes inci-spin { to { transform: rotate(360deg); } }


/* -- text fields -------------------------------------------------------------------------------
   The sign-in screens' field, value for value, with the blush swapped for the chrome's blue: same
   1.0625rem type and -0.005em tracking, same 1.6/1.1/0.6rem padding, same #f7f5f3 fill turning
   white on focus, same 3px ring at 0.12, same 0.72 label scale over 1.42rem. The label follows the
   input in the markup so :not(:placeholder-shown) can reach it, which is why each carries
   placeholder=" ". */
.field { position: relative; }

.wrap form.sectioned .field input.text,
.wrap form.sectioned textarea.text {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	/* White at rest rather than the sign-in screens' fill: those sit on a white panel, these sit on
	   a light one, so the fill would put the field at the same tone as its section. */
	background: #ffffff;
	font: inherit;
	/* The sign-in fields are set in Bricolage. Inheriting Gotham here matched every other value but
	   sat on different metrics — a 55px box against the login's 58px, and a visibly different face. */
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: #100e0d;
	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.wrap form.sectioned .field input.text { padding: 1.6rem 1.1rem 0.6rem; }
.wrap form.sectioned textarea.text { padding: 1.6rem 1.1rem 0.9rem; min-height: 9rem; }

	/* A floating label on a textarea cannot ride on top: 50%, which would drop it into the middle of
	   an empty box. It rests on the first line and rises from there to where an input's label lands. */
	.field.is-textarea label {
		top: 0;
		transform: translateY(1.55rem);
	}

	.wrap .field.is-textarea textarea.text:focus + label,
	.wrap .field.is-textarea textarea.text:not(:placeholder-shown) + label {
		transform: translateY(0.42rem) scale(0.72);
	}

	.wrap .field.is-textarea textarea.text:focus + label { color: #0093ff; }

	.wrap form.sectioned .field input.text:hover,
	.wrap form.sectioned textarea.text:hover { border-color: #d8d1cb; }

	.wrap form.sectioned .field input.text:focus,
	.wrap form.sectioned textarea.text:focus {
		outline: none;
		background: #ffffff;
		border-color: #0093ff;
		box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.12);
	}

.field label {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	/* The shared form label carries a 4px bottom padding. translateY(-50%) centres the padded box,
	   which leaves the text itself sitting half that above centre while the field is empty. */
	padding: 0;
	margin: 0;
	line-height: 1.3;
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: #857d77;
	pointer-events: none;
	transform: translateY(-50%);
	transform-origin: 0 0;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
	            color 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

	.wrap .field input.text:focus + label,
	.wrap .field input.text:not(:placeholder-shown) + label {
		transform: translateY(-1.42rem) scale(0.72);
	}

	.wrap .field input.text:focus + label { color: #0093ff; }

/* Secondary buttons — anything that is not the form's primary submit. They were square crimson
   blocks left over from the old palette. Black
   rather than blue: blue is the page's accent and Save is the page's action, so nothing else should
   wear it. secondary is the same shape unfilled — Cancel should not compete with what it cancels. */
button.button {
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

	button.button:hover,
	button.button:focus {
		background: #333;
		box-shadow: 0 6px 16px -8px rgba(16, 14, 13, 0.6);
	}

	button.button:active {
		background: #000;
		box-shadow: none;
	}

	button.button:focus-visible { outline: 2px solid #0093ff; outline-offset: 2px; }

	button.button:disabled {
		background: #e8e2dc;
		color: #a49c96;
		cursor: default;
		box-shadow: none;
	}

	button.button.secondary {
		background: #fff;
		border-color: #ccc;
		color: #4a423c;
	}

	button.button.secondary:hover,
	button.button.secondary:focus {
		background: #f7f5f3;
		border-color: #b3aaa2;
		box-shadow: none;
	}

	button.button.secondary:active { background: #efeae5; }

/* Selects join the same language. A select always shows a value, so its label has nowhere to sit
   inside the box: it starts raised and stays there rather than floating on focus, which is the
   whole reason .is-select exists as a separate modifier. */
.wrap form.sectioned .field select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	padding: 1.6rem 2.8rem 0.6rem 1.1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #ffffff url(img/arrow-down.svg) no-repeat center right 1.1rem;
	background-size: 0.6rem auto;
	font: inherit;
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: #100e0d;
	cursor: pointer;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

	.field.is-select label {
		transform: translateY(-1.42rem) scale(0.72);
	}

	.wrap form.sectioned .field select:hover { border-color: #d8d1cb; }

	.wrap form.sectioned .field select:focus {
		border-color: #0093ff;
		box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.12);
	}

	.wrap .field select:focus ~ label { color: #0093ff; }

/* Error state. Same red as the shared error list and the same icon it insets, so a bad field and a
   bad form read as the same thing. The icon sits on the field rather than the input so it survives
   the input's own background changing on focus. */
.wrap form.sectioned .field.is-error input.text {
	border-color: #d2233e;
	padding-right: 2.9rem;
}

	.wrap form.sectioned .field.is-error input.text:focus {
		border-color: #d2233e;
		box-shadow: 0 0 0 3px rgba(210, 35, 62, 0.12);
	}

	.wrap .field.is-error label,
	.wrap .field.is-error input.text:focus + label { color: #94040e; }

	.field.is-error::after {
		content: "";
		position: absolute;
		right: 1.1rem;
		top: 50%;
		width: 1.05rem;
		height: 1.05rem;
		transform: translateY(-50%);
		background: url(<?= BASEURL; ?>/_style/css/img/error-red.svg) no-repeat center center;
		background-size: contain;
		pointer-events: none;
	}


/* -- hints and notices -------------------------------------------------------------------------- */
.wrap form.sectioned p.descr {
	margin: 0.45rem 0 1rem 0.1rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #6c6560;
}

/* is-error is the one modifier for the state: on .field it reddens the box, the label and the
   icon; on a hint it reddens the text. Same red as the shared error list either way. The selector
   has to outrank `.wrap form.sectioned p.descr`, which sets the grey and the display that [hidden]
   then has to beat. */
.wrap form.sectioned p.descr.is-error { color: #94040e; }
.wrap form.sectioned p.descr[hidden] { display: none; }


/* -- checkboxes ---------------------------------------------------------------------------------
   The plugin wraps each input in .js-checkbox-activator and toggles .checked. The shared rule fills
   it with a smaller square, which at this size reads as a filled box rather than a tick. Same
   mechanics, an actual checkmark. */
.wrap .js-checkbox-activator {
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	background: #fff;
	flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
}

	.wrap .checkbox-wrap:hover .js-checkbox-activator { border-color: #0093ff; }

	/* The real input is opacity:0 inside the span, so it still takes keyboard focus but had nothing
	   to show for it — 165 boxes with no way to see where you were. :has() reaches the span from the
	   input it wraps; :focus-visible keeps the ring off a mouse click on the label. */
	.wrap .js-checkbox-activator:has(input:focus-visible) {
		border-color: #0093ff;
		box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.28);
	}

	.wrap .js-checkbox-activator::before {
		content: "";
		position: absolute;
		top: 46%;
		left: 50%;
		width: 0.28rem;
		height: 0.55rem;
		background: none;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: translate(-50%, -55%) rotate(45deg) scale(0);
		transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.wrap .js-checkbox-activator.checked {
		background: #0093ff;
		border-color: #0093ff;
	}

		.wrap .js-checkbox-activator.checked::before {
			background: none;
			transform: translate(-50%, -55%) rotate(45deg) scale(1);
		}


/* -- save ---------------------------------------------------------------------------------------
   The sign-in button's shape, in the chrome's blue: the same pill, padding, weight and lift. The
   shared .button rules carry a crimson hover from the old palette, which is what still turned this
   purple — overridden here rather than globally, since every other screen still uses them. */

.form-actions { margin-top: 2rem; }

.wrap form.sectioned .form-actions input[type='submit'].button {
	position: relative;
	display: block;
	width: fit-content;
	min-width: 12.5rem;
	padding: 1.25rem 2.75rem;
	border: 0;
	/* 4px, the same corner the fields carry — the pill was the sign-in screen's shape, and this
	   button sits in a column of squared inputs rather than on its own. */
	border-radius: 4px;
	/* The nav pill's gradient, run top to bottom rather than on its diagonal. CSS cannot interpolate
	   one gradient into another, so the tone steps on hover while the lift and shadow carry it. */
	background: linear-gradient(to bottom, #0093ff, #0080e6);
	color: #fff;
	font-family: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

	.wrap form.sectioned .form-actions input[type='submit'].button:hover,
	.wrap form.sectioned .form-actions input[type='submit'].button:focus {
		background: linear-gradient(to bottom, #0080e6, #006fc9);
		transform: translateY(-1px);
		box-shadow: 0 10px 26px -12px rgba(0, 92, 165, 0.65);
	}

	.wrap form.sectioned .form-actions input[type='submit'].button:active {
		background: linear-gradient(to bottom, #006fc9, #005cad);
		transform: translateY(0);
		box-shadow: none;
	}

	.wrap form.sectioned .form-actions input[type='submit'].button:focus-visible {
		outline: 2px solid #0093ff;
		outline-offset: 3px;
	}

/* ------------------------------------------------------------------------------------------------
   Page header — the page title with its primary action beside it.

   The action used to sit under the title inside the h2, so it rendered in the display face at the
   full heading size: every one of these pages had two headlines, and the louder one was "Add a…"
   rather than the name of the page. Here it is a button on the title's own row, sized and rounded
   like the toolbar controls below it. Outlined rather than solid so a page can grow a second
   action without two filled buttons competing.
   ------------------------------------------------------------------------------------------------ */
.page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: row wrap;
	gap: 1rem 1.5rem;
	margin-bottom: 2.25em;
}

	.page-head h2 {
		margin-bottom: 0;
	}

.page-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	height: 3.4em;
	padding: 0 1.4em;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid #bcc5cf;
	border-radius: 6px;
	background: #fff;
	color: #0077d4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

	/* Masked rather than an <img> or inline SVG, so the glyph takes the link's colour and the six
	   views that use this stay a single line of markup. */
	.page-action::before {
		content: '';
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		background: currentColor;
		-webkit-mask: url(img/plus.svg) no-repeat center / contain;
		mask: url(img/plus.svg) no-repeat center / contain;
	}

	.page-action:hover {
		background: #f3f5f7;
		border-color: #8d99a6;
	}

	.page-action:focus-visible {
		outline: 2px solid #0093ff;
		outline-offset: 2px;
	}

/* ------------------------------------------------------------------------------------------------
   Multiselect — a filter trigger with a checkbox popup, on the shape the insights date picker uses:
   a floating panel with a scrolling body and its actions pinned at the foot, in white because these
   sit on light toolbars over light tables. Was pasted into two ingredient views with the trigger
   styled differently in each.
   ------------------------------------------------------------------------------------------------ */
.multiselect-dropdown {
	position: relative;
	display: inline-block;
}

/* The trigger, sized like every other control in a list toolbar. */
.multiselect-btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.6em;
	height: 3.4em;
	min-width: 10em;
	padding: 0 1.1em;
	border: 1px solid #bcc5cf;
	border-radius: 6px;
	background: #fff;
	color: #1f2429;
	font: inherit;
	font-size: 0.875em;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.multiselect-btn:hover { border-color: #8d99a6; }

.multiselect-dropdown.open .multiselect-btn {
	border-color: #0093ff;
	box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.18);
}

/* The same chevron every select wears, rather than a ▾ text glyph on its own baseline. Masked so
   it takes the button's colour. */
.multiselect-btn .arrow {
	float: none;
	margin-left: auto;
	width: 0.6em;
	height: 0.6em;
	flex-shrink: 0;
	background: #7b848d;
	text-indent: -999em;
	overflow: hidden;
	-webkit-mask: url(img/arrow-down.svg) no-repeat center / contain;
	mask: url(img/arrow-down.svg) no-repeat center / contain;
}

.multiselect-btn .arrow {
	float: right;
	margin-left: 0.5em;
}

/* The filter popup, on the shape the insights date picker uses — a floating panel with a scrolling
   body and its actions pinned at the foot — in white rather than the dark chrome, because these sit
   on a light toolbar over a light table. Centred on its button rather than hung off one edge, so a
   dropdown near the right of the strip does not throw the panel across the table. */
.multiselect-content {
	display: none;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 17em;
	margin-top: 0.5em;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 12px;
	box-shadow: 0 16px 40px -12px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06);
	overflow: hidden;
}

	.multiselect-list {
		max-height: 19rem;
		overflow-y: auto;
		padding: 0.75rem;
	}

	.multiselect-content label {
		display: flex;
		align-items: center;
		gap: 0.75em;
		padding: 0.7em 0.85em;
		border-radius: 8px;
		cursor: pointer;
		font-size: 0.9rem;
		line-height: 1.3;
		white-space: nowrap;
	}

	.multiselect-content label:hover {
		background: #f3f5f7;
	}

	.multiselect-actions {
		display: flex;
		gap: 0.6rem;
		padding: 0.85rem;
		border-top: 1px solid #eceef1;
		background: #fbfcfd;
	}

		.multiselect-actions button {
			flex: 1;
			height: 3rem;
			padding: 0 1.2em;
			border-radius: 8px;
			border: 1px solid transparent;
			font: inherit;
			font-size: 0.9rem;
			font-weight: 600;
			cursor: pointer;
			transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
		}

		.multiselect-actions .ms-clear {
			background: #fff;
			border-color: #bcc5cf;
			color: #40474e;
		}

		.multiselect-actions .ms-clear:hover { background: #f3f5f7; border-color: #8d99a6; }

		.multiselect-actions .ms-apply {
			background: #0093ff;
			border-color: #0093ff;
			color: #fff;
		}

		.multiselect-actions .ms-apply:hover { background: #0077d4; border-color: #0077d4; }

	/* A dropdown at the right end of the strip has nothing to centre into — centring pushes half the
	   panel off-screen. Those hang from their right edge instead. */
	.multiselect-dropdown.align-right .multiselect-content {
		left: auto;
		right: 0;
		transform: none;
	}

	/* A dropdown at the right end of a strip has nothing to centre into — centring pushes half the
	   panel off-screen. Those hang from their right edge instead. */
	.multiselect-dropdown.align-right .multiselect-content {
		left: auto;
		right: 0;
		transform: none;
	}

.multiselect-dropdown.open .multiselect-content {
	display: block;
}

/* The filter strip, on the shared toolbar language: same ground as .line-item toolbars elsewhere,
   and the controls inherit height, border and radius from the global list-toolbar rules rather
   than redefining them here. */

/* A deliberate gap under a tab strip, for the screens that want the content to breathe rather than
   sit flush against the rule. Placed as an element rather than carried as a margin on .tabs so the
   flush layout stays the default and the space is visible in the markup where it is used:

       <div class="tabs">…</div>
       <div class="tabs-spacer"></div>
*/
.tabs-spacer {
	height: 1.5em;
}

/* Tabs — an underline strip: the rule spans the full width and the active tab sits on a blue
   segment of it. A .tab is a <div> on panel-switching screens and an <a> on ones that navigate,
   so this styles both and never assumes a link. Weight stays constant across states, or the
   active tab would change width and slide the underline as you switch. */
.tabs {
	display: flex;
	flex-flow: row wrap;
	gap: 0 0.4em;
	border-bottom: 1px solid #ccc;
}

	.tabs .tab {
		font-size: 1.2rem;
		/* Pulled down so the 2px underline covers the strip's 1px rule instead of stacking on it. */
		margin-bottom: -1px;
		font-weight: 400;
		padding: 0.55em 0.7em;
		color: #555;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		border-bottom: 2px solid transparent;
		transition: color 0.15s ease-out, border-color 0.15s ease-out;
	}

		/* Dropped rather than pulled back with a negative margin: that would align the label but
		   hang the underline out past the column edge. The strip starts where the content does. */
		.tabs .tab:first-child {
			padding-left: 0;
		}

		.tabs .tab:hover {
			color: #111;
		}

		.tabs .tab.is-active {
			color: #0093ff;
			/* Gotham ships 300/400/600 only — 500 silently resolves to 400, so 600 is the next step. */
			font-weight: 600;
			border-bottom-color: #0093ff;
		}

		.tabs .tab:focus-visible {
			outline: 2px solid #0093ff;
			outline-offset: 2px;
		}

	.tab-view {
		display: none;
	}

	.tab-view.is-active {
		display: block;
	}

.js-refresh {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/refresh.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

.download-csv {
	cursor: pointer;
	text-decoration: underline;
	background: url(img/download.svg) no-repeat center;
	background-size: contain;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-indent: -1000px;
	overflow: hidden;
	opacity: 0.5;
	transition: 0.2s ease-out;
}

	.js-refresh:hover,
	.download-csv:hover {
		opacity: 1;
	}

/* Pagination — a three-part bar: what you are looking at, the pages, and a jump control.
   Rendered by render_pagination() in _functions/pagination.func.php; the digits used to carry an
   inline style on every <a> in sixteen view files, which is why the cells could not be restyled
   from here. Borders, radius and the blue active state match the list toolbar. */
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: row wrap;
	gap: 1em 1.5em;
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid #e3e5e8;
}

	.pagination-summary {
		font-size: 0.875em;
		color: #7b848d;
	}

		.pagination-summary strong {
			font-weight: 600;
			color: #1f2429;
		}

.pagination ul,
.pagination-pages {
	display: flex;
	flex-flow: row wrap;
	gap: 0.35em;
	align-items: center;
	justify-content: center;
}

	.pagination li {
		min-width: 2.9em;
		font-size: 0.875em;
		border: 1px solid #bcc5cf;
		border-radius: 6px;
		background: #fff;
		color: #40474e;
		text-align: center;
		cursor: pointer;
		overflow: hidden;
		transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
	}

		.pagination li a,
		.pagination li > span {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.8em 0.7em;
			color: inherit;
			text-decoration: none;
		}

		/* A few views still render a page as a bare <li> with no link inside it. */
		.pagination li:not(:has(a)):not(:has(span)):not(.sep) {
			padding: 0.8em 0.7em;
		}

		.pagination li:not(.is-current):not(.sep):not(.is-disabled):hover {
			background: #f3f5f7;
			border-color: #8d99a6;
			color: #111;
		}

		.pagination li a:focus-visible {
			outline: 2px solid #0093ff;
			outline-offset: -2px;
		}

		.pagination li.is-current {
			background: #6b747d;
			border-color: #6b747d;
			color: #fff;
			font-weight: 600;
		}

		.pagination li.sep {
			min-width: 0;
			padding: 0.8em 0.2em;
			border-color: transparent;
			background: transparent;
			color: #98a0a8;
			cursor: default;
		}

		/* Steps keep their slot at the ends of the strip when there is nowhere to go, so the numbers
		   do not shift sideways as you page through. */
		.pagination li.pagination-step svg {
			width: 1.1em;
			height: 1.1em;
		}

		.pagination li.pagination-step.is-disabled {
			color: #c8ced5;
			border-color: #e3e5e8;
			cursor: default;
		}

	.pagination-jump {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: 0.875em;
		color: #7b848d;
	}

		.pagination-jump label {
			color: #7b848d;
		}

		/* Sized here rather than inheriting the toolbar's 3.4em, which would tower over the digits. */
		.pagination-jump select,
		.pagination-jump .pagination-jump-input {
			appearance: none;
			-webkit-appearance: none;
			outline: none;
			height: 2.9em;
			padding: 0 2.2em 0 0.8em;
			font: inherit;
			color: #1f2429;
			border: 1px solid #bcc5cf;
			border-radius: 6px;
			background: #fff url(img/arrow-down.svg) no-repeat center right 0.7em;
			background-size: 0.55em auto;
			cursor: pointer;
			transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
		}

		.pagination-jump .pagination-jump-input {
			width: 5em;
			padding: 0 0.7em;
			background-image: none;
			text-align: center;
		}

		.pagination-jump select:hover,
		.pagination-jump .pagination-jump-input:hover {
			border-color: #8d99a6;
		}

		.pagination-jump select:focus,
		.pagination-jump .pagination-jump-input:focus {
			border-color: #0093ff;
			box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.18);
		}

		.pagination-of {
			white-space: nowrap;
		}

/* Narrow screens drop the summary and centre what is left, so the pager never wraps into
   three stacked rows on a phone. */
@media screen and (max-width: 700px) {
	.pagination {
		justify-content: center;
	}

	.pagination-summary {
		display: none;
	}
}

/* ------------------------------------------------------------------------------------------------
   List toolbar — the filter strip that sits above every list: search box, view toggle, selects.
   Was copy-pasted into ten view files with three different scopes (.tab-view, .list-search-form,
   .line-item select); all three are declared together here so the strip looks the same wherever
   it appears and there is one place to change it.

   Every control is pinned to one height rather than left to its own padding: inputs, buttons and
   selects each resolve their content box slightly differently, so shared padding alone left the
   text field a pixel taller than its neighbours. Height is in em against the control's own
   0.875em, so the strip still tracks the root font-size ladder.
   ------------------------------------------------------------------------------------------------ */
.tab-view select,
.tab-view input[type='text'],
.tab-view input[type='button'],
.list-search-form select,
.list-search-form input[type='text'],
.list-search-form input[type='button'],
.view-toggle,
.line-item select {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-sizing: border-box;
	height: 3.4em;
	border: 1px solid #bcc5cf;
	padding: 0 1.1em;
	background: #fff;
	color: #1f2429;
	font: inherit;
	font-size: 0.875em;
	border-radius: 6px;
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

	.tab-view input[type='text']::placeholder,
	.list-search-form input[type='text']::placeholder {
		color: #7b848d;
	}

	.tab-view input[type='text']:focus,
	.list-search-form input[type='text']:focus,
	.tab-view select:focus,
	.list-search-form select:focus,
	.line-item select:focus {
		border-color: #0093ff;
		box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.18);
	}

/* The search field carries its own magnifier, so the strip reads as a search box rather than a
   bare input. Padding clears the icon; the icon sits left, where the caret starts. */
.list-search-form input[type='text'],
.tab-view input[type='text'] {
	min-width: 23em;
	padding-left: 2.7em;
	background-image: url(img/search.svg);
	background-repeat: no-repeat;
	background-position: center left 0.95em;
	background-size: 1.05em auto;
}

.tab-view input[type='button'],
.list-search-form input[type='button'] {
	font-weight: 600;
	padding: 0 1.5em;
	background: #111;
	border-color: #111;
	color: #fff;
	cursor: pointer;
}

	.tab-view input[type='button']:hover,
	.list-search-form input[type='button']:hover {
		background: #333;
		border-color: #333;
	}

.tab-view select,
.list-search-form select,
.line-item select {
	padding-right: 2.5em;
	background-image: url(img/arrow-down.svg);
	background-position: center right 0.95em;
	background-size: 0.6em auto;
	background-repeat: no-repeat;
	cursor: pointer;
}

	.tab-view select:hover,
	.list-search-form select:hover,
	.line-item select:hover {
		border-color: #8d99a6;
	}

/* View toggle — a segmented control sharing the toolbar's border, radius and height. Active reads
   blue rather than filled dark, so it states which view is on without competing with the button.
   It carries the shared font-size itself and the segments inherit it, so its em-based height
   resolves against the same 0.875em as every other control in the strip. */
.view-toggle {
	display: flex;
	align-self: center;
	flex-shrink: 0;
	padding: 0;
	overflow: hidden;
}

	.view-toggle-btn {
		background: transparent;
		border: 0;
		height: 100%;
		padding: 0 1.4em;
		font: inherit;
		color: #40474e;
		cursor: pointer;
		transition: background-color 0.15s ease-out, color 0.15s ease-out;
	}

		.view-toggle-btn + .view-toggle-btn {
			border-left: 1px solid #bcc5cf;
		}

		.view-toggle-btn:not(.active):hover {
			background: #f3f5f7;
			color: #111;
		}

		.view-toggle-btn.active {
			background: #e6f2ff;
			color: #0077d4;
			font-weight: 600;
		}

/* The search field submits from inside itself: an enter glyph sits at the right end of the input,
   replacing the separate Go button. It is a real submit button rather than a background image so
   it can be clicked and reached by keyboard; pressing Enter in the field does the same thing. */
.search-field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

	.search-field input[type='text'] {
		padding-right: 3.2em;
	}

	.search-go {
		position: absolute;
		right: 0.4em;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.2em;
		height: 2.2em;
		padding: 0;
		border: 0;
		border-radius: 5px;
		background: transparent;
		font-size: 0.875em;
		color: #7b848d;
		cursor: pointer;
		transition: background-color 0.15s ease-out, color 0.15s ease-out;
	}

		.search-go svg {
			width: 1.2em;
			height: 1.2em;
			display: block;
		}

		.search-go:hover {
			background: #eef1f4;
			color: #1f2429;
		}

		.search-go:focus-visible {
			outline: 2px solid #0093ff;
			outline-offset: 1px;
		}

		.search-field:focus-within .search-go {
			color: #0093ff;
		}


/* Not every toolbar form is a search. is-plain keeps the shared control sizing but drops the
   magnifier and the search field's width, for a form that adds a row rather than filtering one. */
.list-search-form.is-plain input[type='text'] {
	min-width: 13em;
	padding-left: 1.1em;
	background-image: none;
}

/* The search form owns its own row so the field, the button and the "Clear" link that appears
   after a search all sit on one baseline. */
.list-search-form {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-flow: row wrap;
}

.inci-source-holder {
	display: none;
	background: #fff;
	padding: 1em;
	border-radius: 0.5em;
	box-shadow: 0 0 0.3em rgba(0,0,0,0.2)
}

.js-checkbox-activator.checked ~ .inci-source-holder {
	display: block;
}

.inci-source-holder label span {
	font-size: 0.8em;
}

/* Bricolage Grotesque — self-hosted variable font (SIL OFL). Latin + latin-ext only; the
   vietnamese subset is skipped since this page runs in DE/FR/IT/EN. One file per subset covers
   weights 200-800 and the optical-size axis, so there are no separate weight requests. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Auth (user/login)

   Asymmetric split: a bled portrait on the left, a precisely set column on the right.
   Everything is scoped under .auth, so the older .login-holder shell still used by
   forgotpassword, 2fa-verify, accept-terms and login-detour is untouched.

   The load is one short orchestrated sequence — the portrait un-masks and settles while the
   type staggers up — and then the page goes still. Motion after that is confined to the
   ambient drift on the photo and to direct responses to input. All of it is pure CSS with
   animation-delay, so no script is required to reveal anything: the form is usable the
   instant HTML parses, which matters more here than on any other page in the app.
   ========================================================================= */

/* The tokens are shared with the sign-out screen, which borrows the palette and the typeface without
   the split layout below. */
.auth,
.auth-exit {
	--ink: #100e0d;
	--ink-soft: #6c6560;
	--ink-faint: #a49c96;
	--paper: #ffffff;
	--shell: #f7f5f3;
	--line: #e6e1dd;
	--field-line: #c4bab2;
	--clay: #c68d80;
	--clay-deep: #ab6144;
	--clay-press: #94523a;
	--blush: #c28375;
	--blush-deep: #b07264;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--display: 'Bricolage Grotesque', 'Gotham', -apple-system, Arial, sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	background: var(--paper);
	color: var(--ink);
	font-family: var(--display);
}

.auth {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	z-index: 1;
	animation: auth-in 0.45s ease both;
}

.auth ::selection { background: var(--clay); color: #fff; }

/* ---------------------------------------------------------------- sign out */

/* Not the split layout — this screen is on its own for about a second before the redirect. It takes
   the palette and the typeface only. The rule under the words runs for exactly that second, so the
   wait is visible rather than a pause with nothing happening in it. */
.auth-exit {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	animation: auth-in 0.45s ease both;
}

	.auth-exit .auth-exit-mark {
		display: block;
		width: 72px;
		height: auto;
		margin: 0 0 2rem;
		filter: brightness(2) contrast(0.78) drop-shadow(0 3px 8px rgba(16, 14, 13, 0.14));
	}

	.auth-exit h1 {
		margin: 0;
		font-size: clamp(1.75rem, 3.4vw, 2.25rem);
		line-height: 1.15;
		font-weight: 400;
		letter-spacing: -0.025em;
		color: var(--ink);
	}

	.auth-exit p {
		margin: 0.625rem 0 0;
		font-size: 1rem;
		line-height: 1.6;
		color: var(--ink-soft);
	}

	.auth-exit .auth-exit-bar {
		width: 160px;
		height: 2px;
		margin-top: 2.25rem;
		border-radius: 999px;
		background: var(--line);
		overflow: hidden;
	}

		.auth-exit .auth-exit-bar span {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 999px;
			background: var(--blush);
			transform-origin: 0 50%;
			animation: auth-exit-fill 1s linear both;
		}

@keyframes auth-exit-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- left: the portrait */

.auth-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 3rem;
	background: #15110f;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
}

	.auth-stage-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 42%;
		z-index: -3;
	}

	.auth-stage-veil {
		position: absolute;
		inset: 0;
		z-index: -2;
		background: linear-gradient(to bottom,
			rgba(16, 14, 13, 0) 0%,
			rgba(16, 14, 13, 0) 50%,
			rgba(16, 14, 13, 0.80) 100%);
	}

	/* A whisper of grain. It stops the flat gradient from banding and gives the dark half a
	   printed quality rather than a screen one. */
	/* Sampling grid over the skin — a regular lattice of points that lights up around the
	   cursor. It is what the product actually does to a face, and it is image-agnostic, so the
	   photograph underneath can be swapped without touching it. Decorative: without JavaScript
	   the canvas stays empty and only the portrait shows. */
	.auth-stage-mesh {
		position: absolute;
		inset: 0;
		z-index: -1;
		mix-blend-mode: screen;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.auth-stage-grain {
		position: absolute;
		inset: -50%;
		z-index: -1;
		pointer-events: none;
		opacity: 0.035;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	}

.auth-stage-say { color: #fff; }

	/* Each line rises on its own beat — the one deliberately theatrical moment on the page. */
	.auth-stage-headline {
		margin: 0;
		/* Fluid off the stage's own width. The vw line is the fallback for browsers without
		   container query units; the cqw line wins where they are supported and keeps the
		   headline in proportion to its column rather than to the whole window. */
		font-size: clamp(2rem, 4.4vw, 5rem);
		font-size: clamp(2rem, 7cqw, 5rem);
		line-height: 1.1;
		font-weight: 400;
		letter-spacing: -0.025em;
		font-variation-settings: "opsz" 96;
	}

	.auth-stage-headline .auth-line {
		display: block;
		white-space: nowrap;
	}

	/* Word by word on load: a short fade with a few pixels of lift, 70ms apart. Deliberately
	   small — the line-by-line version read as theatrical. */
	/* Word by word on load: a short fade with a few pixels of lift, 70ms apart. Deliberately
	   small — the line-by-line version read as theatrical. */
	.auth-stage-headline .auth-line span {
		display: inline-block;
		animation: auth-word 0.55s var(--ease) both;
		animation-delay: calc(0.3s + var(--i) * 0.07s);
	}


	/* The chrome mark, above the form. Sized in css px rather than rem so it does not track the
	   type scale, and pulled 3px left because its own bevel reads as padding.

	   The source render is dark chrome and sat heavy against the white column. Brightness alone
	   clips the highlights before it lifts the shadows, so contrast comes down with it — that
	   opens the dark passages into silver while keeping the highlight structure. The drop-shadow
	   is what stops the lightened mark from floating flat on the page. */
	.auth-mark {
		display: block;
		width: 90px;
		height: auto;
		margin: 0 0 2rem -3px;
		filter: brightness(2) contrast(0.78) drop-shadow(0 3px 8px rgba(16, 14, 13, 0.14));
	}


/* ---------------------------------------------------------------- right: the column */

/* Centred by auto margins on the inner rather than align-items, because this column scrolls: with
   align-items: center a form taller than the viewport is centred on the overflow too and the top of
   it — the mark and the title — ends up above the scroll origin, unreachable. Auto margins resolve
   to zero once the free space is negative, so the column simply starts at the top and scrolls. */
.auth-panel {
	position: relative;
	display: flex;
	padding: 3rem;
	overflow-y: auto;
	background: var(--paper);
}

	/* Hairline seam that fades out top and bottom rather than butting into the corners. */
	.auth-panel::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 1px;
		background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent);
	}

.auth-panel-inner {
	width: 100%;
	max-width: 24rem;
	margin: auto;
}

.auth-form { display: none; }

.auth-form.is-current {
	display: block;
	animation: auth-swap 0.4s var(--ease) both;
}

.auth .auth-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 24;
	color: var(--ink);
}

.auth .auth-sub {
	margin: 0.4rem 0 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- fields */

.auth-fields {
	display: block;
	margin-top: 2.25rem;
}

/* Filled boxes with the label floating up inside them: at rest the label sits on the value's own
   baseline as a placeholder, and on focus or fill it rises into the padding above. The field keeps
   one shape throughout — only its fill, border and the label move. */
.auth-field {
	position: relative;
	margin-bottom: 0.875rem;
}

	/* A field plus whatever hangs off it. The spacing moves to the stack so the meter is not pushed
	   away from the box it describes. */
	.auth-field-stack { margin-bottom: 0.875rem; }
	.auth-field-stack .auth-field { margin-bottom: 0; }

	.auth .auth-field input {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 1.6rem 1.1rem 0.6rem;
		border: 1px solid var(--line);
		border-radius: 4px;
		background: var(--shell);
		font: inherit;
		font-size: 1.0625rem;
		font-weight: 400;
		letter-spacing: -0.005em;
		color: var(--ink);
		transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	}

	.auth .auth-field input:hover { border-color: #d8d1cb; }

	.auth .auth-field input:focus {
		outline: none;
		background: var(--paper);
		border-color: var(--clay-deep);
		box-shadow: 0 0 0 3px rgba(160, 90, 73, 0.12);
	}

	.auth-field label {
		position: absolute;
		left: 1.1rem;
		top: 50%;
		font-size: 1.0625rem;
		font-weight: 400;
		letter-spacing: -0.005em;
		color: #857d77;
		pointer-events: none;
		transform: translateY(-50%);
		transform-origin: 0 0;
		transition: transform 0.22s var(--ease), color 0.22s var(--ease);
	}

	.auth .auth-field input:focus + label,
	.auth .auth-field input:not(:placeholder-shown) + label {
		transform: translateY(-1.42rem) scale(0.72);
	}

	.auth .auth-field input:focus + label { color: var(--clay-deep); }

/* ---------------------------------------------------------------- code boxes */

/* One box per digit, on the same fill, border and radius as the fields. Sized off the column rather
   than in fixed widths so six of them always divide the panel evenly. */
.auth-code {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
}

	.auth .auth-code input {
		width: 100%;
		box-sizing: border-box;
		padding: 0.875rem 0;
		border: 1px solid var(--line);
		border-radius: 4px;
		background: var(--shell);
		font: inherit;
		font-size: 1.75rem;
		font-weight: 200;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		color: var(--ink);
		font-variant-numeric: tabular-nums;
		transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	}

	.auth .auth-code input:hover { border-color: #d8d1cb; }

	.auth .auth-code input:focus,
	.auth .auth-code input:focus-visible {
		outline: none;
		background: var(--paper);
		border-color: var(--clay-deep);
		box-shadow: 0 0 0 3px rgba(160, 90, 73, 0.12);
	}

/* ---------------------------------------------------------------- actions */

/* Sign in and SSO are one row: two ways into the same account, not a first choice and a fallback
   under a divider. */
.auth-actions {
	display: flex;
	align-items: stretch;
	gap: 0.625rem;
	margin-top: 2.25rem;
}

.auth .auth-submit {
	position: relative;
	display: block;
	width: fit-content;
	min-width: 12.5rem;
	padding: 1.25rem 2.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--blush);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	/* Also worn by an <a> on the screens whose action is a link rather than a submit. */
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.28s var(--ease);
}

	.auth .auth-submit:hover:not(:disabled) {
		background: var(--blush-deep);
		transform: translateY(-1px);
		box-shadow: 0 10px 26px -12px rgba(148, 82, 58, 0.55);
	}

	.auth .auth-submit:active:not(:disabled) {
		transform: translateY(0);
		box-shadow: none;
	}

	.auth .auth-submit:disabled {
		background: #f2efec;
		color: var(--ink-faint);
		box-shadow: inset 0 0 0 1px var(--line);
		cursor: not-allowed;
	}

/* Stacked and left-aligned rather than inline: each link keeps its own width so the underline that
   grows on hover stops at the end of the words. */
.auth-quiet-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4375rem;
	margin-top: 1.25rem;
}

.auth .auth-quiet-link {
	display: inline-block;
	font-size: 0.875rem;
	color: var(--ink-soft);
	text-decoration: none;
	background-image: linear-gradient(var(--ink), var(--ink));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--ease), color 0.22s var(--ease);
}

	.auth .auth-quiet-link:hover {
		color: var(--ink);
		background-size: 100% 1px;
	}

/* The primary's colour, drawn as an outline instead of a fill, so the pair reads as one control in
   two states. Hover only warms the fill to --shell: taking it to full blush made the two buttons
   swap places. */
.auth .auth-sso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 2rem;
	border: 1.5px solid var(--blush);
	border-radius: 999px;
	background: var(--paper);
	color: var(--blush-deep);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.28s var(--ease);
}

	.auth .auth-sso:hover {
		background: var(--shell);
		transform: translateY(-1px);
		box-shadow: 0 10px 26px -12px rgba(148, 82, 58, 0.55);
	}

	.auth .auth-sso:active {
		transform: translateY(0);
		box-shadow: none;
	}

.auth .auth-switch {
	margin: 2.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

	.auth .auth-switch a {
		color: var(--ink);
		font-weight: 500;
		text-decoration: none;
		background-image: linear-gradient(var(--clay), var(--clay));
		background-size: 100% 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size 0.3s var(--ease);
	}

	.auth .auth-switch a:hover { background-size: 100% 2px; }

/* ---------------------------------------------------------------- terms, meter, errors */

.auth .auth-legal {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin: 1.75rem 0 0;
}

	.auth .auth-legal label {
		flex: 1;
		width: auto;
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--ink-soft);
	}

	.auth .auth-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

	/* The shared control fills a smaller square inside the box when checked. Here it draws a tick
	   instead — two borders on the pseudo-element, rotated — and the whole box fills with clay, so
	   the state reads at a glance rather than as a dot inside a dot. */
	/* Matched to the fields above — same fill, same border, same radius — so it reads as one more
	   input rather than a stray control. */
	.auth .js-checkbox-activator {
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 6px;
		border-width: 1px;
		border-color: var(--line);
		background: var(--shell);
		transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
	}

	.auth .js-checkbox-activator:hover { border-color: var(--field-line); }

	.auth .js-checkbox-activator.checked {
		border-color: var(--clay-deep);
		background: var(--clay-deep);
	}

		/* A tick, drawn as two borders of a rotated box. Centred from the box's middle rather than
		   with percentage insets: the rotation makes any inset-based placement drift with size.

		   The geometry is on the unchecked state too, and only opacity and scale change — the shared
		   control transitions `all`, so a tick that differed in position and size as well would be
		   animated across the box from the corner the base style parks it in. */
		.auth .js-checkbox-activator::before {
			top: 50%;
			left: 50%;
			width: 6px;
			height: 11px;
			background: none;
			border: 0;
			border-right: 2px solid #fff;
			border-bottom: 2px solid #fff;
			border-radius: 1px;
			opacity: 0;
			transform: translate(-50%, -58%) rotate(45deg) scale(0.7);
			transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
		}

		.auth .js-checkbox-activator.checked::before {
			opacity: 1;
			transform: translate(-50%, -58%) rotate(45deg) scale(1);
		}

/* Strength meter. Three segments rather than one continuous bar, because the score only ever
   resolves to three bands — a smooth bar would imply a precision the plugin does not have. The
   notches are painted over the fill, so the plugin can keep setting a single width in percent. */
.auth .pass-wrapper {
	margin-top: 0.6875rem;
}

.auth .pass-graybar {
	position: relative;
	height: 4px;
	margin: 0;
	border-radius: 999px;
	background: #ebe6e2;
	overflow: hidden;
}

	.auth .pass-graybar::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, transparent calc(33.333% - 1.5px), var(--paper) calc(33.333% - 1.5px) calc(33.333% + 1.5px), transparent calc(33.333% + 1.5px)),
			linear-gradient(to right, transparent calc(66.666% - 1.5px), var(--paper) calc(66.666% - 1.5px) calc(66.666% + 1.5px), transparent calc(66.666% + 1.5px));
	}

/* The fill is one hue family at a time — the band it is in, not a rainbow it happens to have
   reached. A red segment still showing under "Strong password" read as a warning about the very
   thing being praised. */
.auth .pass-colorbar {
	height: 4px;
	border-radius: 999px;
	background-color: transparent;
	background-image: linear-gradient(90deg, #c9c2bc, #a49c96);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* The plugin picks its colour by sliding a sprite up behind the bar — it writes an inline
	   background-position of 0px -<score>px, which drags the gradient clean out of a 4px-tall
	   element. Only !important outranks an inline style. */
	background-position: 0 0 !important;
	transition: width 0.28s var(--ease);
}

.auth .pass-wrapper.is-weak .pass-colorbar { background-image: linear-gradient(90deg, #ff7a6b, #ef3346); }
.auth .pass-wrapper.is-fair .pass-colorbar { background-image: linear-gradient(90deg, #ffd85c, #ff9d2e); }
.auth .pass-wrapper.is-strong .pass-colorbar { background-image: linear-gradient(90deg, #56d998, #12a566); }

.auth .pass-wrapper.is-weak .pass-text { color: #c93a4c; }
.auth .pass-wrapper.is-fair .pass-text { color: #b3762a; }
.auth .pass-wrapper.is-strong .pass-text { color: #1f9963; }

.auth .pass-text {
	display: block;
	min-height: 1.25rem;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

/* No panel, no rule down the side — the message is short and the colour already says what it is. A
   small mark keeps it from reading as ordinary copy at a glance.

   The shared ul.error-list gives every item a red wash and insets an icon by 3em, so both are undone
   here; without that the item paints its own band inside whatever this rule sets. */
.auth .error-list {
	margin: 1.5rem 0 0;
	padding: 0.9375rem 1.125rem;
	list-style: none;
	border-radius: 10px;
	background: rgba(201, 58, 76, 0.07);
}

	.auth .error-list li {
		position: relative;
		margin: 0;
		padding: 0 0 0 1.625rem;
		background: none;
		font-size: 0.9375rem;
		line-height: 1.5;
		color: #c93a4c;
	}

	.auth .error-list li + li { margin-top: 0.5rem; }

	.auth .error-list li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.16em;
		width: 1.0625rem;
		height: 1.0625rem;
		transform: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c93a4c' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.9 12.2H7.1v-1.8h1.8v1.8zm0-3.1H7.1V3.8h1.8v5.3z'/%3E%3C/svg%3E") no-repeat center center;
		background-size: contain;
	}

/* ---------------------------------------------------------------- focus, keyboard */

/* Note: no border-radius here. Setting one in a :focus-visible rule reshapes the element itself,
   not just the ring — it was squaring off the fields and flattening the pill button on focus. The
   outline follows whatever radius the element already has. */
.auth a:focus-visible,
.auth button:focus-visible,
.auth input:focus-visible {
	outline: 2px solid var(--clay-deep);
	outline-offset: 3px;
}

.auth .auth-field input:focus-visible { outline: none; }

/* ---------------------------------------------------------------- motion */

@keyframes auth-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes auth-word {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@keyframes auth-swap {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* The column arrives in three beats — heading, the line under it, then the form — rather than as one
   block. 60ms apart and six pixels of lift: enough that the panel is not simply there when the page
   paints, not so much that it performs. The panel shakes as a whole on an error, which composes with
   this because the shake is on the parent and the lift on its children. */
.auth-form.is-current > .auth-title { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.06s; }
.auth-form.is-current > .auth-sub   { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.12s; }
.auth-form.is-current > form,
.auth-form.is-current > .error-list,
.auth-form.is-current > .auth-actions,
.auth-form.is-current > .auth-quiet-links { animation: auth-swap 0.5s var(--ease) both; animation-delay: 0.18s; }

@keyframes auth-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

.auth-shake { animation: auth-shake 0.45s ease both; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 940px) {
	.auth {
		position: absolute;
		min-height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: 15rem 1fr;
	}

	.auth-stage {
		padding: 1.75rem;
		justify-content: space-between;
	}

	.auth-stage-photo { object-position: 50% 38%; }
	.auth-stage-headline { font-size: clamp(1.75rem, 7vw, 2.5rem); }
	.auth-stage-say { max-width: 22ch; }

	.auth-panel { padding: 2rem 1.5rem 2.5rem; }
	.auth-panel::before { display: none; }
	.auth-panel-inner { padding: 1.5rem 0 2.5rem; }
}

/* Laptops and half-height windows. The column fits at ~820px; below that it tightens rather than
   scrolls, since a login that needs scrolling to reach its own button reads as broken. */
@media (min-width: 941px) and (max-height: 820px) {
	.auth-panel { padding: 2.5rem 3rem; }
	.auth-mark { width: 64px; margin-bottom: 1.375rem; }
	.auth-fields { margin-top: 1.625rem; }
	.auth-actions { margin-top: 1.75rem; }
	.auth-quiet-links { margin-top: 1rem; }
	.auth .auth-switch { margin-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.auth,
	.auth-exit,
	.auth-form.is-current,
	.auth-form.is-current > *,
	.auth-stage-headline .auth-line span { animation: none !important; }

	/* The bar keeps running: it is not decoration, it is how long the redirect takes. */
	.auth-exit .auth-exit-bar span { animation: auth-exit-fill 1s linear both; }

	.auth-shake { animation: none; }

	.auth .auth-field input,
	.auth-field label,
	.auth .auth-submit,
	.auth .auth-sso,
	.auth .auth-quiet-link,
	.auth .auth-switch a { transition: none; }
}

/* ============================================================================================
   Activity log
   Shared by every screen that shows entries from `log` — the ingredient editor's History tab, the
   internal log, and anything added later. Rendered by _views/_parts/log-feed.php.

   A feed rather than a dump: each row is a badge, what changed, who did it, and when. The three
   columns are fixed so every row reads on the same axis however long its values are.
   ========================================================================================= */
.log-feed-more { margin-top: 1.25rem; }

.log-feed {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ece7e2;
}

.log-entry {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0 1rem;
	align-items: start;
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid #ece7e2;
}

	.log-entry.is-hidden { display: none; }

	.log-entry:hover { background: #faf8f6; }

/* The badge carries the kind of change, so a column of them can be read without reading a word. */
.log-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 0.4rem;
	flex-shrink: 0;
}

	.log-icon svg { width: 1.05rem; height: 1.05rem; }

	.log-icon.is-updated { background: rgba(0, 147, 255, 0.12); color: #0072c6; }
	.log-icon.is-created { background: rgba(35, 150, 90, 0.14); color: #1d7a4c; }
	.log-icon.is-status  { background: rgba(214, 138, 30, 0.16); color: #a2650f; }
	.log-icon.is-deleted { background: rgba(210, 35, 62, 0.12); color: #b0233a; }

/* Nothing to show. Quiet, and in the feed's own column so it reads as the list's state rather than
   as page copy. */
.log-empty {
	margin: 0;
	padding: 1.5rem 0;
	color: #98a0a8;
	font-size: 0.9rem;
}

.log-body { min-width: 0; }

	.log-title {
		margin: 0;
		font-size: 1rem;
		line-height: 1.35;
		color: #6c6560;
	}

		.log-title strong { font-weight: 600; color: #100e0d; }

	/* The old and the new against each other. Monospace because these are stored values — codes and
	   identifiers — not prose, and an em dash where a value was cleared. */
	.log-diff {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 0.4rem;
		margin: 0.4rem 0 0 0;
	}

		.log-val {
			padding: 0.2rem 0.5rem;
			border-radius: 0.25rem;
			background: #f2eeea;
			font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
			font-size: 0.82rem;
			line-height: 1.35;
			color: #4a423c;
			word-break: break-word;
		}

		.log-val.is-empty { color: #a49c96; }

		.log-arrow { color: #a49c96; font-size: 0.9rem; }

	.log-note {
		margin: 0.4rem 0 0 0;
		font-size: 0.88rem;
		line-height: 1.4;
		color: #4a423c;
	}

	.log-who {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		margin: 0.45rem 0 0 0;
		font-size: 0.85rem;
		color: #857d77;
	}

		.log-who svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

		.log-who a { color: #6c6560; text-decoration: none; border-bottom: 1px solid #ded7d0; }
		.log-who a:hover { color: #0093ff; border-bottom-color: #0093ff; }

		/* Which record the entry belongs to. Only rendered by logs that span more than one. */
		.log-who .log-sep { color: #cfc6c0; }
		.log-who .log-record { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }

/* Right-aligned and stacked, so the column is a scannable edge rather than a ragged sentence. */
.log-when {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	white-space: nowrap;
	padding-top: 0.1rem;
}

	.log-when .log-date { font-size: 0.95rem; font-weight: 500; color: #4a423c; line-height: 1.35; }
	.log-when .log-time { font-size: 0.85rem; color: #a49c96; line-height: 1.35; }

@media (max-width: 640px) {
	.log-entry { grid-template-columns: auto minmax(0, 1fr); }
	.log-when { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: 0.4rem; padding-top: 0.45rem; }
}