/*
 * 2026 design system — the AI & Agentic Commerce page, and nothing else.
 *
 * Loaded on page-ai-agentic-ds.php only, on top of tokens.css, layout.css, chrome.css,
 * pages.css and knowledge.css, and declared as a dependency of knowledge.css rather than
 * trusted to source order. See inc/ds.php.
 *
 * ── WHAT IS IN HERE ─────────────────────────────────────────────────────────
 *
 * One composition, its motion, and one list:
 *
 *   .fc-ladder    the centre rail and its six rungs
 *   .fc-rung      one step: the disc on the rail, the customer's move, the OMS's job
 *   .fc-latest    the hairline list of articles
 *
 * Everything this page shares with the other two Knowledge Hub pages is in knowledge.css —
 * the notice bar, .fc-ask, the 1fr 2fr split, the prose measure, the centred head and the
 * Q&A's own furniture. This page adds no primitives and no type roles.
 *
 * ── THE LADDER'S GEOMETRY ───────────────────────────────────────────────────
 *
 * Two equal columns with a 132px gutter, a hairline down the middle of that gutter, and an
 * 88px violet disc centred on the hairline per rung. The disc is absolutely placed, which
 * is why .fc-rung is position:relative — and, usefully, that also gives the two visually
 * hidden column labels inside each rung the positioned ancestor .fc-sr needs.
 *
 * The rail is drawn on the ladder rather than per rung so it runs unbroken through the
 * 24px gaps between them. It stops at the ladder's edges, so it starts and ends at the
 * first and last discs' centres rather than trailing past them.
 *
 * Below 1100 the whole thing becomes one column with the rail and the discs down the left,
 * which is the design's own mobile behaviour — see RESPONSIVE.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GROUNDS
 * Two of the five sections sit on white; the rest are the page's own bone, which
 * the body paints. Stated here rather than as inline block styles so a section's
 * ground is one line in one file.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ai-how,
body.fc-ds .fc-ai-latest {
	background: var(--fc-white);
}

/* The design's aside under the answer — a quieter voice, not a smaller one. */
body.fc-ds .fc-ai-aside {
	color: var(--fc-ink-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COLUMN HEADS
 * "The customer" and "The role of the OMS", once, above the ladder — on the same
 * grid as the rungs so each head sits over its column. aria-hidden, because the
 * same two strings are repeated inside every rung as .fc-sr where they actually
 * label something; see the header of inc/ds-ai-agentic.php.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ladder-heads {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 132px;
	margin-top: var(--sp-72);
}

/* The OMS side is the page's argument, so its head carries the accent. */
body.fc-ds .fc-ladder-heads__oms {
	color: var(--fc-violet);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LADDER
 * An <ol> stripped of its markers: every rung already says "Step N" in the
 * numeral position, and a browser marker beside that would be a second count.
 * The list stays an <ol> for what it means, not for what it draws.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ladder {
	position: relative;
	margin: var(--sp-24) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

/*
 * The rail. A 1px pseudo-element rather than a border on anything, so it can sit exactly
 * on the gutter's centre line and pass behind the discs.
 */
body.fc-ds .fc-ladder::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--stroke-1);
	background: var(--fc-ink-a20);
}

body.fc-ds .fc-rung {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 132px;
	/* Stretch: the two cards in a rung are one step, so they end level. */
	align-items: stretch;
}

/*
 * The disc, centred on the rail. z-index because it has to cover the rail it sits on —
 * this one is load-bearing, unlike the hairlines on .fc-ruled.
 */
body.fc-ds .fc-rung__node {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	box-sizing: border-box;
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-8);
	/* The design's 200px — anything over half the height is a circle; kept as written. */
	border-radius: 200px;
	background: var(--fc-violet);
	border: var(--stroke-1) solid var(--fc-violet);
	color: var(--fc-white);
}

body.fc-ds .fc-rung__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: var(--radius-10);
}

/* The customer's side: a white card on the section's white ground, held by its hairline. */
body.fc-ds .fc-rung__card--a {
	background: var(--fc-white);
	border: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The OMS's side: the wash, so the answer column reads as one thing down the page. */
body.fc-ds .fc-rung__card--b {
	background: var(--fc-violet-wash);
	border: var(--stroke-1) solid var(--fc-violet);
}

body.fc-ds .fc-rung__index {
	color: var(--fc-ink-a60);
}

/* The closing line, centred under the ladder on the standfirst's measure. */
body.fc-ds .fc-ai-how__foot {
	max-width: 620px;
	margin: var(--sp-54) auto 0;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE REVEAL
 * Each rung's two cards arrive as it comes into view — the customer's move from
 * the left, the OMS's answer from the right a beat later, which is the order the
 * page is arguing in.
 *
 * THE RESTING STATE IS VISIBLE, the same call as steps.js on the Buyer's Guide.
 * The cards are only ever hidden by a rule that requires data-in="1" on their
 * rung, an attribute only assets/ds/ladder.js sets — so a visitor whose script
 * never runs reads twelve visible cards rather than an empty section. The
 * design's export sets opacity:0 in the stylesheet and lifts it from state,
 * which blanks the page's whole argument if the script does not arrive.
 *
 * animation-fill-mode: both, not forwards — the right card is delayed 180ms and
 * has to be hidden during that delay, which only `both` (i.e. backwards too)
 * does.
 * ────────────────────────────────────────────────────────────────────────── */
@keyframes fcRungL {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fcRungR {
	from {
		opacity: 0;
		transform: translateX(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

body.fc-ds .fc-rung[data-in] .fc-rung__card--a {
	animation: fcRungL 520ms cubic-bezier(0.2, 0, 0, 1) both;
}

body.fc-ds .fc-rung[data-in] .fc-rung__card--b {
	animation: fcRungR 520ms cubic-bezier(0.2, 0, 0, 1) 180ms both;
}

/*
 * Content that moves while it is being read is what this setting is asking about, and the
 * ladder is the page's argument rather than decoration. So no animation at all — not a
 * shorter one. ladder.js also bails before it sets the attribute, which makes this the
 * belt to its braces.
 */
@media (prefers-reduced-motion: reduce) {
	body.fc-ds .fc-rung[data-in] .fc-rung__card--a,
	body.fc-ds .fc-rung[data-in] .fc-rung__card--b {
		animation: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE LATEST
 * A hairline list: a rule above the first row and under every row, the title at
 * .fc-h5's size and the kind as a label on the right.
 *
 * Every row is currently a <div> rather than an <a>, because the four rows are
 * placeholders with nowhere to go — so the hover and focus rules below are
 * written against .fc-latest__row and only ever fire once a row is a link. See
 * DEVIATIONS in the header of inc/ds-ai-agentic.php.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-latest {
	margin: var(--sp-54) 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-latest__item {
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-latest__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-32);
	padding: var(--sp-24) 0;
	color: var(--text-on-light);
	text-decoration: none;
}

body.fc-ds .fc-latest__title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-h5-24);
	line-height: var(--lh-title);
}

body.fc-ds .fc-latest__kind {
	color: var(--fc-ink-a60);
	/* A two-word label against a headline: it stays on one line and stays on the right. */
	white-space: nowrap;
}

body.fc-ds a.fc-latest__row:hover .fc-latest__title,
body.fc-ds a.fc-latest__row:focus-visible .fc-latest__title {
	color: var(--fc-violet);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 * The design ships desktop only for everything except the ladder, which it does
 * carry a mobile composition for. Container queries against `page`, at the
 * theme's own breakpoints — see THE SHELL in layout.css.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	/*
	 * The ladder turns down the left: the rail and the discs move to a single spine and
	 * the two cards stack against it. The design's own behaviour, and the reason the
	 * column heads are repeated inside every rung — the heads row goes away here, and
	 * without those hidden labels a stacked reader would have two cards and nothing
	 * saying which is the customer and which is the OMS.
	 */
	body.fc-ds .fc-ladder-heads {
		display: none;
	}

	body.fc-ds .fc-ladder::before {
		left: 8px;
	}

	body.fc-ds .fc-rung {
		grid-template-columns: 1fr;
		gap: var(--sp-16);
		/* Room for the spine and its disc, which now sit outside the cards. */
		padding-left: 96px;
	}

	body.fc-ds .fc-rung__node {
		left: 8px;
		top: var(--sp-24);
		width: 72px;
		height: 72px;
		/* Centred on the rail horizontally, but pinned near the rung's top vertically. */
		transform: translate(-50%, 0);
	}

	/* Both sides now arrive from the same direction, because both sit to the rail's right. */
	body.fc-ds .fc-rung[data-in] .fc-rung__card--a {
		animation-name: fcRungR;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-rung {
		padding-left: 72px;
	}

	body.fc-ds .fc-rung__card {
		padding: var(--sp-24);
	}

	body.fc-ds .fc-rung__node {
		width: 56px;
		height: 56px;
	}

	body.fc-ds .fc-rung__node .fc-rung__icon {
		width: 28px;
		height: 28px;
	}
}

@container page (max-width: 440px) {
	/*
	 * At a phone's width 72px of gutter is a quarter of the line, so the spine goes and
	 * the disc sits above its rung as a marker. The steps are still numbered in the cards,
	 * so nothing is lost with the rail.
	 */
	body.fc-ds .fc-ladder::before {
		display: none;
	}

	body.fc-ds .fc-ladder {
		gap: var(--sp-32);
	}

	body.fc-ds .fc-rung {
		padding-left: 0;
		padding-top: 68px;
	}

	body.fc-ds .fc-rung__node {
		left: 0;
		top: 0;
		transform: none;
	}

	/* A headline and a label side by side at 320px is two words per line each. */
	body.fc-ds .fc-latest__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-8);
	}
}