/* =========================================================================
   Animated employment lifecycle.

   HTML cards sitting over an inline SVG layer. The SVG carries the
   connectors and the card borders — the two things that have to be drawn
   on — and the cards carry everything that is simply present from the
   start: icon, text, status pill.

   Positions are in the artwork's own 1020 x 574 units, turned into
   percentages, so the whole thing scales with its container and the cards
   stay registered to the SVG underneath them at any size.
   ========================================================================= */

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

.nlc__stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--nlc-w) / var(--nlc-h);
	background: #fcfaf7;
	/* The ground is a dot grid, not flat: 19.1 artwork units apart with a dot
	   just under one unit across, measured off the source. */
	background-image: radial-gradient( #ece6df 0.042cqw, transparent 0.042cqw );
	background-size: 1.87cqw 1.87cqw;
	border-radius: 12px;
	overflow: hidden;
}

.nlc__wires,
.nlc__cards {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nlc__cards {
	pointer-events: none;
}

/* ------------------------------------------------------------- The wires */

.nlc__wire {
	fill: none;
	stroke: #cac8c6;
	stroke-width: var(--nlc-sw, 1.1);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nlc__wire.is-dashed {
	stroke-dasharray: 4 4;
}

/*
 * The blue wire is a second path laid exactly over the grey one, revealed
 * by its own dashoffset. Drawing over rather than recolouring keeps the
 * grey route visible underneath at every moment of the reveal, which is
 * what makes the line read as travelling rather than switching.
 */
.nlc__wire--live {
	stroke: #2a82e1;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.nlc__head {
	fill: #cac8c6;
	stroke: none;
}

.nlc__head--live {
	fill: #2a82e1;
	opacity: 0;
}

/* ----------------------------------------------------------- The borders */

/*
 * The base border carries the card's white fill. Filling here rather than on
 * the card <div> keeps the paint underneath the stroke instead of on top of
 * it — a background on the div would be drawn above the SVG and would eat the
 * inner half of every border, making all eight read a third thinner.
 */
.nlc__border {
	fill: #fff;
	stroke: #cac8c6;
	stroke-width: var(--nlc-sw, 1.1);
}

/*
 * The gradient stroke, revealed clockwise from the left-middle edge.
 *
 * It deliberately does NOT carry the .nlc__border class. Its paint is the
 * per-card gradient set as a `stroke` attribute, and a CSS `stroke` anywhere
 * in the cascade beats a presentation attribute outright — sharing the base
 * class painted all five of these flat grey.
 */
.nlc__border--live {
	fill: none;
	stroke-width: calc(var(--nlc-sw, 1.1) * 1.27);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

/* ------------------------------------------------------------- The cards */

/*
 * Card interior, measured off the source at 3840px and expressed against the
 * container so it holds at any width. 1cqw is 10.2 artwork units.
 *
 *   padding      13.3 / 12.75 / 13.5 units   icon  21.8 square, radius 5.8
 *   title        7.4 units          body  6.3 units, line pitch 10.1
 *   pill         12.2 tall, left-aligned with the icon, not with the text
 *   check        11.2 across, inset 7.7 from the top and 8 from the right
 */
.nlc__card {
	position: absolute;
	left: calc(var(--x) / var(--nlc-w, 1020) * 100%);
	top: calc(var(--y) / var(--nlc-h, 574) * 100%);
	width: calc(var(--nlc-cw, 159.375) / var(--nlc-w, 1020) * 100%);
	height: calc(var(--nlc-ch, 76.5) / var(--nlc-h, 574) * 100%);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: start;
	gap: 0.69cqw 0.86cqw;
	padding: 1.3cqw 1.25cqw 1.32cqw;
	box-sizing: border-box;
}

.nlc__icon {
	grid-row: 1;
	grid-column: 1;
	align-self: center;
	display: grid;
	place-items: center;
	width: 2.14cqw;
	height: 2.14cqw;
	border-radius: 0.57cqw;
}

.nlc__glyph {
	width: 62%;
	height: 62%;
	fill: none;
	stroke: #fff;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nlc__icon--green  { background: #34c759; }
.nlc__icon--blue   { background: #3b82f6; }
.nlc__icon--purple { background: #a855f7; }
.nlc__icon--red    { background: #f0564a; }
.nlc__icon--sky    { background: #639cea; }
.nlc__icon--violet { background: #c35fe6; }
.nlc__icon--mint   { background: #62cc84; }

.nlc__text {
	grid-row: 1;
	grid-column: 2;
	display: block;
	min-width: 0;
}

.nlc__title {
	display: block;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.73cqw;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: #13131a;
}

.nlc__body {
	display: block;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.62cqw;
	font-weight: 300;
	line-height: 1.6;
	color: #6b6b74;
}

/* The pill hangs off the card's left padding, in line with the icon — not
   with the text column above it. */
.nlc__pill {
	grid-row: 2;
	grid-column: 1 / span 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.36cqw;
	padding: 0.27cqw 0.6cqw 0.27cqw 0.58cqw;
	border-radius: 0.59cqw;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.55cqw;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.nlc__pill svg {
	flex: none;
	width: 0.83cqw;
	height: 0.83cqw;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nlc__pill--green { background: #dcfce7; color: #15803d; }
.nlc__pill--blue  { background: #dbeafe; color: #1d4ed8; }
.nlc__pill--amber { background: #fef3c7; color: #a16207; }
.nlc__pill--grey  { background: #eceae8; color: #6b6b74; }
.nlc__pill--purple { background: #f1dafc; color: #a83ee0; }

/* The check badge, inside the card's top-right corner. */
.nlc__check {
	position: absolute;
	top: 0.76cqw;
	right: 0.78cqw;
	width: 1.1cqw;
	height: 1.1cqw;
	border-radius: 50%;
	background: #2a82e1;
	display: grid;
	place-items: center;
	transform: scale(0);
}

.nlc__check svg {
	width: 62%;
	height: 62%;
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * The pop. A slight overshoot on the way in and nothing on the way out —
 * the badge only ever arrives.
 */
.nlc__check.is-in {
	animation: nlc-check 300ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes nlc-check {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.nlc__check.is-in { animation: none; transform: scale(1); }
}

/* =========================================================================
   Compliant Contracts layout.

   The same cards on a 2000 x 1000 canvas, measured off that artwork: 1cqw
   is 20 units here rather than 10.2, and the cards carry more text for
   their size, so the type and spacing are set again for it.

     padding     25 / 26           icon  44 square, radius 10, top-aligned
     title       19, body 16 on a 21 pitch, 17 off the icon
     pill        30 tall, 16 type      check  22 across, inset 16
   ========================================================================= */

.nlc--contracts .nlc__stage {
	background-color: #fbfaf8;
	background-image: radial-gradient(#ece6df 0.04cqw, transparent 0.045cqw);
	background-size: 1cqw 1cqw;
}

.nlc--contracts .nlc__wire.is-dashed {
	stroke-dasharray: 6 6;
}

.nlc--contracts .nlc__card {
	gap: 0.45cqw 0.75cqw;
	padding: 1.25cqw 0.95cqw 1.25cqw 1.3cqw;
}

.nlc--contracts .nlc__icon {
	align-self: start;
	width: 2.2cqw;
	height: 2.2cqw;
	border-radius: 0.5cqw;
}

.nlc--contracts .nlc__title {
	font-size: 0.9cqw;
	line-height: 1.3;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

/* Two lines at most, as drawn — the measure is narrow, and a wider fallback
   face must not push the pill out of the card. */
.nlc--contracts .nlc__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 0.71cqw;
	line-height: 1.36;
	letter-spacing: -0.005em;
}

.nlc--contracts .nlc__pill {
	gap: 0.3cqw;
	padding: 0.32cqw 0.45cqw;
	border-radius: 0.4cqw;
	font-size: 0.76cqw;
}

.nlc--contracts .nlc__pill svg {
	width: 0.9cqw;
	height: 0.9cqw;
}

.nlc--contracts .nlc__check {
	top: 0.8cqw;
	right: 0.8cqw;
	width: 1.1cqw;
	height: 1.1cqw;
}