/* =========================================================================
   Animated onboarding cards.

   A row of employee onboarding cards on a dotted ground. The row is
   translated sideways by the script as the page scrolls; everything else is
   static layout.

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

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

.noc__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2000 / 1125;
	overflow: hidden;
	border-radius: 12px;
	background-color: #faf9f6;
	background-image: radial-gradient(#e6e1da 0.07cqw, transparent 0.08cqw);
	background-size: 0.8cqw 0.8cqw;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #13131a;
}

.noc__row {
	position: absolute;
	left: 0;
	top: calc(146 / 1125 * 100%);
	display: flex;
	gap: 2.1cqw;
	transform: translateX(7.8cqw);
	will-change: transform;
}

.noc__ico {
	flex: none;
	width: 1.2cqw;
	height: 1.2cqw;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------- A card */

.noc__card {
	flex: none;
	width: 35.4cqw;
	min-height: 60cqw;
	background: #fff;
	border: 0.06cqw solid #e6e6e6;
	border-radius: 0.8cqw 0.8cqw 0 0;
	box-shadow: 0 0.3cqw 1.2cqw rgba(19, 19, 26, 0.04);
}

.noc__head {
	display: flex;
	align-items: center;
	gap: 0.7cqw;
	height: 3.35cqw;
	padding-left: 0.75cqw;
	border-bottom: 0.06cqw solid #e8e8e8;
	font-size: 1cqw;
}

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

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

.noc__body {
	padding: 1.55cqw 1.5cqw 0;
}

.noc__who {
	display: flex;
	align-items: center;
	gap: 0.8cqw;
}

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

.noc__id {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3cqw;
	min-width: 0;
}

.noc__name {
	font-size: 1.5cqw;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.noc__role {
	padding-left: 0.2cqw;
	font-size: 0.9cqw;
	line-height: 1.2;
	color: #6b6b74;
}

.noc__btn {
	flex: none;
	display: grid;
	place-items: center;
	height: 2.4cqw;
	padding: 0 0.9cqw;
	border: 0.1cqw solid #e2e2e2;
	border-radius: 0.6cqw;
	font-size: 0.9cqw;
}

.noc__summary {
	margin: 1.6cqw 0 0;
	font-size: 0.9cqw;
	line-height: 1.1cqw;
	color: #6b6b74;
}

/* ------------------------------------------------------ Checklist groups */

.noc__group {
	margin-top: 1.1cqw;
	padding: 1.2cqw 1.2cqw 0.95cqw;
	border: 0.075cqw solid #e3e3e3;
	border-radius: 0.9cqw;
}

.noc__summary + .noc__group {
	margin-top: 1.1cqw;
}

.noc__group-head {
	display: flex;
	align-items: center;
	height: 2.4cqw;
}

.noc__group-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4cqw;
	height: 2.4cqw;
	margin-right: 1.25cqw;
	border-radius: 0.5cqw;
	background: #f2f2f3;
	color: #55555c;
}

.noc__group-id {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15cqw;
}

.noc__group-title {
	font-size: 1cqw;
	line-height: 1.15;
}

.noc__group-count {
	font-size: 0.85cqw;
	line-height: 1.15;
	color: #6b6b74;
}

.noc__bar {
	flex: none;
	width: 7.5cqw;
	height: 0.6cqw;
	border-radius: 0.3cqw;
	background: #e4e4e6;
	overflow: hidden;
}

/* An empty group still shows a sliver of blue, as the app does. */
.noc__bar i {
	display: block;
	height: 100%;
	min-width: 0.15cqw;
	border-radius: inherit;
	background: #2f7be6;
}

.noc__of {
	flex: none;
	margin-left: 0.3cqw;
	font-size: 0.9cqw;
	color: #6b6b74;
	white-space: nowrap;
}

.noc__ico--down {
	margin-left: 1.15cqw;
	color: #13131a;
	stroke-width: 1.9;
}

.noc__tasks {
	margin: 1.25cqw 0 0;
	padding: 0 0 0 0.6cqw;
	list-style: none;
}

.noc__task {
	display: flex;
	align-items: center;
	height: 2.925cqw;
	font-size: 0.9cqw;
	color: #13131a;
}

.noc__task .noc__ico--done,
.noc__task .noc__ico--doing,
.noc__task .noc__ico--todo {
	margin-right: 0.65cqw;
}

.noc__ico--done .is-fill {
	fill: #2f7be6;
	stroke: none;
}

.noc__ico--done .is-mark {
	stroke: #fff;
	stroke-width: 2;
}

.noc__ico--doing {
	color: #2f7be6;
}

.noc__ico--todo {
	color: #a1a1aa;
}

.noc__task.is-todo {
	color: #74747c;
}

.noc__ico--left {
	width: 1cqw;
	height: 1cqw;
	margin-left: 0.65cqw;
	color: #13131a;
	stroke-width: 2;
}

.noc__task.is-todo .noc__ico--left {
	color: #74747c;
}

.noc__flag-pill {
	margin-left: auto;
	margin-right: 1.15cqw;
	padding: 0.25cqw 0.5cqw;
	border-radius: 0.4cqw;
	background: #f6e1fb;
	font-size: 0.75cqw;
	line-height: 1;
	color: #a92fd3;
	white-space: nowrap;
}

/* The row runs off the foot of the frame into the ground. */
.noc__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%;
	background: linear-gradient(to bottom, rgba(250, 249, 246, 0), #faf9f6 88%);
	pointer-events: none;
}