/* =========================================================================
   Animated global onboarding dashboard.

   The Neo HR Onboarding screen in a browser window, drawn in HTML so the
   numbers, bars and pills can change. The app bar stays put; the page under
   it is translated by the script to scroll.

   Measured off 2000 x 1125 frames. Every size is those pixels over 20, as
   container units: 1cqw is 20 artwork pixels.
   ========================================================================= */

.ngo {
	container-type: inline-size;
	width: 100%;
}

.ngo__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2000 / 1125;
	background: linear-gradient(to bottom, #fff 0%, #fdfcfb 55%, #f8f6f3 100%);
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #13131a;
}

/* The faint dashed lattice the frames sit on, fading out towards the top. */
.ngo__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146.9 31.1'%3E%3Cpath d='M0 0 146.9 31.1M0 31.1 146.9 0' fill='none' stroke='%23dcd6cf' stroke-width='.45' stroke-dasharray='1.6 1.6'/%3E%3C/svg%3E");
	background-size: 14.4cqw 3.05cqw;
	-webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 75%);
	mask-image: linear-gradient(to bottom, transparent 10%, #000 75%);
}

/* ---------------------------------------------------------- The window */

.ngo__window {
	position: absolute;
	left: 8.35%;
	top: calc(104 / 1125 * 100%);
	width: 83.3%;
	bottom: -2cqw;
	display: flex;
	flex-direction: column;
	background: #f2f2f2;
	border-radius: 0.9cqw 0.9cqw 0 0;
	box-shadow: 0 0 0 0.05cqw #e6e6e6;
}

.ngo__chrome {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.4cqw;
	height: 2cqw;
	padding-left: 0.85cqw;
}

.ngo__chrome i {
	width: 0.7cqw;
	height: 0.7cqw;
	border-radius: 50%;
	background: #ff5f57;
}

.ngo__chrome i:nth-child(2) { background: #febc2e; }
.ngo__chrome i:nth-child(3) { background: #28c840; }

.ngo__app {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0 0.4cqw;
	background: #fff;
}

.ngo__ico {
	flex: none;
	width: 1.1cqw;
	height: 1.1cqw;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ----------------------------------------------------------- App bar */

.ngo__bar-top {
	position: relative;
	z-index: 2;
	flex: none;
	display: flex;
	align-items: center;
	height: 4.55cqw;
	padding: 0 1.5cqw 0 1.35cqw;
	border-bottom: 0.08cqw solid #e6e6e6;
	background: #fff;
}

.ngo__brand {
	display: flex;
	align-items: center;
	gap: 0.4cqw;
	font-size: 0.9cqw;
	font-weight: 500;
}

.ngo__logo {
	display: grid;
	place-items: center;
	width: 2.4cqw;
	height: 2.4cqw;
	border: 0.08cqw solid #dedede;
	border-radius: 0.5cqw;
	font-size: 0.65cqw;
	font-weight: 400;
	color: #2a7be4;
}

.ngo__nav,
.ngo__tools {
	display: flex;
	align-items: center;
	height: 3.1cqw;
	border-radius: 1.55cqw;
	background: #f5f5f5;
}

.ngo__nav {
	margin-left: auto;
	width: 34cqw;
	justify-content: space-around;
	padding: 0 1cqw;
	box-sizing: border-box;
}

.ngo__nav-item {
	display: flex;
	align-items: center;
	gap: 0.5cqw;
	font-size: 0.9cqw;
	color: #13131a;
}

.ngo__nav-item.is-active {
	color: #2a7be4;
}

.ngo__tools {
	gap: 2.2cqw;
	margin-left: 1.1cqw;
	padding: 0 1.15cqw 0 1.6cqw;
	color: #555;
}

.ngo__me {
	display: grid;
	place-items: center;
	width: 2.1cqw;
	height: 2.1cqw;
	border-radius: 50%;
	background: #9b5de5;
	font-size: 0.75cqw;
	color: #fff;
}

/* ------------------------------------------------------- Scrolled page */

.ngo__viewport {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.ngo__page {
	/* The extra foot lets the scroll stop with the pagination clear of the
	   fade, the way the last frame shows it — the window runs 2cqw past the
	   frame and the fade covers the lowest 12%. */
	padding: 2cqw 2.6cqw 6.5cqw;
	will-change: transform;
}

.ngo__tabs {
	display: flex;
	gap: 0.5cqw;
	height: 2.2cqw;
}

.ngo__tab {
	position: relative;
	padding: 0 0.55cqw;
	font-size: 1cqw;
	line-height: 1.6cqw;
	color: #6b6b74;
}

.ngo__tab.is-active {
	color: #2a7be4;
}

.ngo__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.15cqw;
	border-radius: 0.1cqw;
	background: #2a7be4;
}

.ngo__title {
	margin: 1.65cqw 0 0;
	font-size: 2cqw;
	font-weight: 700;
	line-height: 2.4cqw;
	letter-spacing: -0.01em;
	color: #0d0d12;
}

.ngo__sub {
	margin: 0.4cqw 0 0;
	font-size: 0.9cqw;
	line-height: 1.3cqw;
	color: #6b6b74;
}

/* ------------------------------------------------------------- Stats */

.ngo__stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.35cqw;
	margin-top: 2.5cqw;
}

.ngo__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 11.15cqw;
	padding: 1.9cqw 1.5cqw 0;
	box-sizing: border-box;
	border: 0.08cqw solid #dcdcdc;
	border-radius: 0.7cqw;
	overflow: hidden;
}

/* The coloured band along each card's foot. */
.ngo__stat::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.7cqw;
	background: var(--band);
}

.ngo__stat--yellow  { --band: #f7c744; }
.ngo__stat--magenta { --band: #d65ae8; }
.ngo__stat--red     { --band: #ee5d5d; }
.ngo__stat--cyan    { --band: #6ec6e6; }
.ngo__stat--purple  { --band: #8b5cf0; }

.ngo__stat-head {
	display: flex;
	align-items: center;
	gap: 0.5cqw;
	font-size: 0.9cqw;
	line-height: 1.3cqw;
	color: #55555c;
}

.ngo__stat-head .ngo__ico {
	width: 1.25cqw;
	height: 1.25cqw;
}

.ngo__stat-num {
	margin-top: 1.35cqw;
	font-size: 2.4cqw;
	font-weight: 600;
	line-height: 2.6cqw;
	color: #2a2a31;
	font-variant-numeric: tabular-nums;
	transform-origin: 0 60%;
}

.ngo__stat-num.is-bump {
	animation: ngo-bump 420ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

.ngo__stat-unit {
	margin-top: 0.4cqw;
	font-size: 1.1cqw;
	line-height: 1.5cqw;
	color: #6b6b74;
}

/* ----------------------------------------------------------- Filters */

.ngo__filters {
	display: flex;
	gap: 1.05cqw;
	margin-top: 3cqw;
}

.ngo__search,
.ngo__select {
	display: flex;
	align-items: center;
	height: 2.1cqw;
	padding: 0 0.75cqw;
	border-radius: 0.45cqw;
	background: #f4f4f5;
	font-size: 0.8cqw;
}

.ngo__search {
	width: 19.05cqw;
	box-sizing: border-box;
	justify-content: space-between;
	color: #8a8a92;
}

.ngo__select {
	gap: 0.6cqw;
	color: #333;
}

.ngo__select .ngo__ico {
	width: 0.85cqw;
	height: 0.85cqw;
}

/* ------------------------------------------------------------- Table */

.ngo__table {
	margin-top: 1.15cqw;
	padding: 1.5cqw 1.5cqw 1.55cqw;
	border: 0.08cqw solid #dcdcdc;
	border-radius: 1.1cqw;
}

.ngo__thead,
.ngo__row {
	display: grid;
	grid-template-columns: 16.25cqw 13.05cqw 13.1cqw 15.45cqw 12.8cqw 1fr;
	align-items: center;
}

.ngo__thead {
	height: 2.5cqw;
	border-radius: 0.5cqw;
	background: #f4f4f5;
	font-size: 0.8cqw;
	font-weight: 600;
	color: #44444b;
}

.ngo__thead > span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 1.4cqw;
}

.ngo__thead > span:first-child {
	padding-left: 0.75cqw;
	padding-right: 1.6cqw;
}

.ngo__thead .ngo__ico {
	width: 0.95cqw;
	height: 0.95cqw;
	color: #8a8a92;
}

.ngo__row {
	position: relative;
	height: 4.125cqw;
	border-radius: 0.5cqw;
}

.ngo__thead + .ngo__row {
	margin-top: 0.3cqw;
}

/* The soft wash a row takes when one of its tasks lands. */
.ngo__row.is-flash {
	animation: ngo-flash 1100ms ease-out;
}

.ngo__who {
	display: flex;
	align-items: center;
	gap: 0.5cqw;
	padding-left: 0.5cqw;
	min-width: 0;
}

.ngo__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.1cqw;
	height: 2.1cqw;
	border-radius: 50%;
	background: var(--tone);
	font-size: 0.7cqw;
	color: #fff;
}

.ngo__id {
	display: flex;
	flex-direction: column;
	gap: 0.12cqw;
	min-width: 0;
}

.ngo__name {
	font-size: 0.95cqw;
	line-height: 1.15;
	color: #13131a;
	white-space: nowrap;
}

.ngo__mail {
	font-size: 0.8cqw;
	line-height: 1.2;
	color: #6b6b74;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ngo__country {
	display: flex;
	align-items: center;
	gap: 0.45cqw;
	margin-left: -0.25cqw;
	font-size: 0.95cqw;
	color: #2a2a31;
}

.ngo__flag {
	flex: none;
	width: 1.3cqw;
	height: 1.3cqw;
	border-radius: 50%;
	overflow: hidden;
	background: #eee;
}

.ngo__flag img {
	display: block;
	width: 100%;
	height: 100%;
}

.ngo__date {
	margin-left: -0.2cqw;
	font-size: 0.95cqw;
	color: #2a2a31;
}

.ngo__tasks {
	display: flex;
	flex-direction: column;
	gap: 0.55cqw;
	margin-left: -0.25cqw;
}

.ngo__label {
	font-size: 0.95cqw;
	line-height: 1;
	color: #55555c;
	white-space: nowrap;
}

.ngo__bar {
	display: block;
	width: 14.45cqw;
	height: 0.25cqw;
	border-radius: 0.13cqw;
	background: #e6e6e6;
	overflow: hidden;
}

.ngo__bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #2a7be4;
	transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease;
}

.ngo__row.is-ready .ngo__bar i {
	background: #4cc771;
}

/* The three pills share one cell; the row's state shows one of them. */
.ngo__status {
	display: grid;
	justify-items: start;
}

.ngo__pill {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4cqw;
	height: 1.8cqw;
	padding: 0 0.45cqw;
	border-radius: 0.35cqw;
	font-size: 0.95cqw;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 260ms ease, transform 360ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

.ngo__pill .ngo__ico {
	width: 1.2cqw;
	height: 1.2cqw;
}

.ngo__pill--invited    { background: #fde7a8; color: #dda10b; }
.ngo__pill--onboarding { background: #f3c9f6; color: #c533d4; }
.ngo__pill--ready      { background: #c8ebf8; color: #2f9fd6; }

.ngo__row.is-invited .ngo__pill--invited,
.ngo__row.is-onboarding .ngo__pill--onboarding,
.ngo__row.is-ready .ngo__pill--ready {
	opacity: 1;
	transform: none;
}

.ngo__more {
	display: flex;
	gap: 0.15cqw;
	padding-left: 1.6cqw;
}

.ngo__more i {
	width: 0.2cqw;
	height: 0.2cqw;
	border-radius: 50%;
	background: #13131a;
}

/* -------------------------------------------------------- Pagination */

.ngo__pager {
	display: flex;
	align-items: center;
	margin-top: 1.3cqw;
}

.ngo__pages {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 7cqw;
	height: 2.35cqw;
	padding: 0 0.5cqw;
	box-sizing: border-box;
	border-radius: 0.5cqw;
	background: #f4f4f5;
	font-size: 0.8cqw;
	color: #c4c4c8;
}

.ngo__pages i {
	font-style: normal;
}

.ngo__pages b {
	display: grid;
	place-items: center;
	width: 2.3cqw;
	height: 2.3cqw;
	border-radius: 0.45cqw;
	background: linear-gradient(180deg, #3b8cf3, #2a6fe0);
	font-weight: 400;
	color: #fff;
}

.ngo__picked {
	margin-left: auto;
	font-size: 0.85cqw;
	color: #b4b4ba;
}

.ngo__btn {
	display: grid;
	place-items: center;
	height: 2.1cqw;
	margin-left: 0.6cqw;
	padding: 0 1cqw;
	border-radius: 0.45cqw;
	background: #f4f4f5;
	font-size: 0.85cqw;
	color: #55555c;
}

.ngo__btn:first-of-type {
	margin-left: 1.6cqw;
}

/* The page dissolves into the ground at the foot of the frame. */
.ngo__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12%;
	background: linear-gradient(to bottom, rgba(250, 249, 247, 0), #f9f8f5 85%);
	pointer-events: none;
}

/* Used while the board is wound back, off screen. */
.ngo.is-resetting .ngo__bar i,
.ngo.is-resetting .ngo__pill {
	transition: none;
}

@keyframes ngo-flash {
	0%   { background: rgba(42, 123, 228, 0.09); }
	100% { background: rgba(42, 123, 228, 0); }
}

@keyframes ngo-bump {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.ngo__bar i,
	.ngo__pill { transition: none; }
	.ngo__row.is-flash,
	.ngo__stat-num.is-bump { animation: none; }
}