/*
 * 2026 design system — the OMS Buyer's Guide page, and nothing else.
 *
 * Loaded on page-buyers-guide-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 and its motion:
 *
 *   .fc-ways    the two step tracks, old against new
 *   .fc-step    one numbered chip and the arrow under it
 *
 * Everything this page shares with the other two Knowledge Hub pages moved to
 * knowledge.css when the second one arrived — the notice bar, .fc-ask, the 1fr 2fr split,
 * the prose measure, the centred head and the whole of .fc-matrix. What is left is the
 * seven-steps-against-four argument, which is this page's and no other's.
 *
 * The two matrix variants below are the only trace of that: a variant is two custom
 * properties, and the properties are this table's numbers rather than the matrix's.
 *
 * What is NOT in here, deliberately: the ruled column (.fc-ruled, layout.css), the seams
 * between sections (.fc-seam, layout.css), the Q&A accordion (.fc-faq, pages.css) and
 * every type role the page uses. This page adds no primitives.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GROUND
 * One of the six sections sits on white that knowledge.css does not already
 * paint; the rest are the page's own bone, which the body paints. Stated here
 * rather than as an inline block style so a section's ground is one line in one
 * file.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-guide-modern {
	background: var(--fc-white);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE TWO WAYS
 * Seven steps in ink against four in violet, side by side, and the comparison IS
 * the argument — so the two cards have to be readable at the same time.
 *
 * 1fr 1.15fr, the design's ratio: the new way's chips carry more copy and more
 * padding, and equal columns would make the shorter track look like the fuller
 * one's summary. align-items: start so a card ends where its content ends
 * rather than stretching to match the other — the height difference is the
 * point being made.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ways {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	align-items: start;
}

body.fc-ds .fc-way {
	padding: var(--sp-32) var(--sp-32) 40px;
	border: var(--stroke-1) solid var(--fc-ink-a20);
	border-radius: var(--radius-10);
}

body.fc-ds .fc-way--new {
	background: var(--fc-violet-wash);
	border-color: var(--fc-violet);
}

/*
 * The eyebrow and the count on one baseline. align-items: baseline and not center,
 * because they are two different sizes — 16 and 12 — and centring them would leave the
 * smaller one floating.
 */
body.fc-ds .fc-way__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-16);
	/* Two labels and a narrow card: let them wrap rather than overflow. */
	flex-wrap: wrap;
}

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

body.fc-ds .fc-way--new .fc-way__label,
body.fc-ds .fc-way--new .fc-way__count {
	color: var(--fc-violet);
}

/*
 * The track. An <ol> stripped of its markers, because the design's 01/02/03 are the
 * numbers and a browser marker beside them would be a second set. The list stays an <ol>
 * for what it means, not for what it draws.
 */
body.fc-ds .fc-way__track {
	margin: var(--sp-24) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

/*
 * One step and the arrow below it, as a single flex row of the track. Stretch, so a chip
 * fills the card's width and the arrow centres itself under it.
 */
body.fc-ds .fc-step {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

body.fc-ds .fc-step__chip {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-16);
	padding: 18px 22px;
	border-radius: var(--radius-10);
	background: var(--fc-ink-12);
}

body.fc-ds .fc-way--new .fc-step__chip {
	padding: 22px 26px;
	background: var(--fc-white);
	/* The design's lift. Soft and low — the chip sits on the wash, not above the page. */
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.06);
}

/*
 * The index, in the numeral face. Not .fc-numeral — that is 48px for a stat figure.
 * These are a step count at body size, so the face is stated and the size is not
 * inherited from a role that means something else.
 */
body.fc-ds .fc-step__n {
	font-family: var(--font-quote);
	font-weight: var(--fw-regular);
	font-size: var(--type-body-18);
	line-height: var(--lh-loose);
	letter-spacing: var(--ls-quote);
	color: var(--fc-bone-a60);
	/* Two digits that must not fall to a second line, and must align down the track. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.fc-ds .fc-way--new .fc-step__n {
	font-size: var(--type-h5-24);
	line-height: var(--lh-title);
	color: var(--fc-violet);
}

/* .fc-copy carries the ink colour, so the chips on ink restate it and the white ones do not. */
body.fc-ds .fc-way--old .fc-step__text {
	color: var(--fc-bone-a80);
}

/*
 * The connector. A fixed height rather than a margin on the chip, so the arrow occupies
 * the gap instead of sitting in one — which is what lets the last step have no arrow and
 * no trailing space under it.
 */
body.fc-ds .fc-step__link {
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fc-ink-a50);
}

body.fc-ds .fc-way--new .fc-step__link {
	height: 40px;
	color: var(--fc-violet);
}

body.fc-ds .fc-way__note {
	margin-top: var(--sp-32);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE REVEAL
 * Each step fades up in turn as the two tracks come into view. The design's
 * motion: one short ease-out per card, no bounce and no parallax.
 *
 * THE RESTING STATE IS VISIBLE, which is the only thing in this block worth
 * arguing about. The steps are hidden by a rule that requires data-in="1" on
 * their track — an attribute only assets/ds/steps.js ever sets — so a visitor
 * whose script never loads reads eleven visible steps rather than an empty
 * page. Written the other way round, [data-track] > * { opacity: 0 }, the
 * design's own export hides the whole argument until JavaScript arrives. See
 * the head of steps.js.
 * ────────────────────────────────────────────────────────────────────────── */
@keyframes fcStepIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

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

body.fc-ds [data-track][data-in] > * {
	animation: fcStepIn 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

/*
 * The stagger, to seven — the old track's length. Written out rather than generated
 * because there is no CSS that generates it, and seven lines is cheaper than a
 * --delay custom property set on every <li> in the markup.
 */
body.fc-ds [data-track][data-in] > *:nth-child(1) {
	animation-delay: 0ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(2) {
	animation-delay: 90ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(3) {
	animation-delay: 180ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(4) {
	animation-delay: 270ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(5) {
	animation-delay: 360ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(6) {
	animation-delay: 450ms;
}

body.fc-ds [data-track][data-in] > *:nth-child(7) {
	animation-delay: 540ms;
}

/* The new way's steps carry more copy, so they arrive a little more slowly. */
body.fc-ds [data-track="new"][data-in] > * {
	animation-duration: 520ms;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
 * THE VENDOR HEAD
 * Not .fc-kb-split. Build-11 gives this one heading a 360px column instead of the
 * Hub's 1fr 2fr, drops it from display-62 to display-48, and puts 32px of air
 * either side of the line between the two columns — a heading of five words against
 * two sentences, which is a narrower pairing than the sections around it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-guide-vendors__head {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	align-items: start;
}

body.fc-ds .fc-guide-vendors__title {
	padding-right: var(--sp-32);
	font-size: var(--type-display-48);
	line-height: var(--lh-tight);
}

body.fc-ds .fc-guide-vendors__copy {
	max-width: 640px;
	padding-left: var(--sp-32);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE VENDOR PICKER
 * A menu of six with a panel beside it, and it was a seven-column .fc-matrix until
 * Build-11. Six radios and six labels, for the reason in inc/ds-buyers-guide.php.
 *
 * The whole thing bleeds 40px each way, which is the ruled inset paid back — the
 * design runs it out to the hairlines rather than to the page edge, so the menu's
 * own left padding lands the labels back on the text column.
 *
 * The six enumerated :checked selectors are the same shape as the Integrations
 * story carousel's, and for the same reason: :nth-of-type on the radio rather than
 * an id, so nothing depends on the ids the markup happens to mint.
 *
 * .fc-pick is a <div role="radiogroup"> and NOT a <fieldset>, which matters to the
 * block below rather than to this one: sticky does not work on a fieldset's child in
 * Chromium. See the note over $group in inc/ds-buyers-guide.php.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pick {
	margin: 0 -40px;
}

body.fc-ds .fc-pick__grid {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-pick__menu {
	display: flex;
	flex-direction: column;
}

/*
 * A <label>, not the design's <button>: it is what makes the radio behind it work, and it
 * is why the arrow keys move down the menu without a line of script. 60% ink, the design's
 * own value, so the five that are not chosen read as available rather than as disabled.
 */
body.fc-ds .fc-pick__tab {
	padding: 14px var(--sp-32) 14px 40px;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-body-16);
	line-height: var(--lh-body);
	color: var(--fc-ink-a60);
	cursor: pointer;
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
	transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

/* The last label's rule would double the grid's own bottom border. */
body.fc-ds .fc-pick__menu > .fc-pick__tab:last-child {
	border-bottom: 0;
}

body.fc-ds .fc-pick__tab:hover {
	color: var(--fc-violet);
}

body.fc-ds .fc-pick__radio:nth-of-type(1):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(1),
body.fc-ds .fc-pick__radio:nth-of-type(2):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(2),
body.fc-ds .fc-pick__radio:nth-of-type(3):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(3),
body.fc-ds .fc-pick__radio:nth-of-type(4):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(4),
body.fc-ds .fc-pick__radio:nth-of-type(5):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(5),
body.fc-ds .fc-pick__radio:nth-of-type(6):checked ~ .fc-pick__grid .fc-pick__tab:nth-child(6) {
	background: var(--fc-white);
	color: var(--text-on-light);
}

/*
 * The focus ring. tokens.css draws one on :focus-visible for everything, but these radios
 * are .fc-sr — the ring has to be drawn on the label the keyboard has actually landed on.
 * Inset, because the labels butt against the panel's left rule.
 */
body.fc-ds .fc-pick__radio:nth-of-type(1):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(1),
body.fc-ds .fc-pick__radio:nth-of-type(2):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(2),
body.fc-ds .fc-pick__radio:nth-of-type(3):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(3),
body.fc-ds .fc-pick__radio:nth-of-type(4):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(4),
body.fc-ds .fc-pick__radio:nth-of-type(5):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(5),
body.fc-ds .fc-pick__radio:nth-of-type(6):focus-visible ~ .fc-pick__grid .fc-pick__tab:nth-child(6) {
	outline: 2px solid var(--fc-violet);
	outline-offset: -2px;
}

/*
 * All six panels in one grid cell, so the block is as tall as the LONGEST of them and
 * nothing moves as you go down the menu. The five that are not showing are
 * visibility:hidden, which takes them out of the accessibility tree as well as out of
 * sight while still holding the space open.
 */
body.fc-ds .fc-pick__stage {
	display: grid;
	background: var(--fc-white);
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-pick__panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
	align-content: start;
	padding: var(--sp-32) 40px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}

body.fc-ds .fc-pick__radio:nth-of-type(1):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(1),
body.fc-ds .fc-pick__radio:nth-of-type(2):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(2),
body.fc-ds .fc-pick__radio:nth-of-type(3):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(3),
body.fc-ds .fc-pick__radio:nth-of-type(4):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(4),
body.fc-ds .fc-pick__radio:nth-of-type(5):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(5),
body.fc-ds .fc-pick__radio:nth-of-type(6):checked ~ .fc-pick__grid .fc-pick__panel:nth-child(6) {
	opacity: 1;
	visibility: visible;
}

body.fc-ds .fc-pick__label {
	margin-bottom: var(--sp-16);
	color: var(--text-on-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE PINNED SCROLL-DRIVE
 * Build-11 pins the picker and walks down the menu as the page scrolls. It is the
 * page's one piece of motion and it is not the resting state: the block above is
 * complete, click-driven and the right height on its own, and every rule in here
 * waits for assets/ds/pick.js to set data-pin. See the head of that file.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-pick[data-pin] {
	/* Six stops of 150px plus the block's own height, which is the design's figure. */
	height: calc(6 * 150px + 573px);
}

body.fc-ds .fc-pick[data-pin] > .fc-pick__grid {
	position: sticky;
	top: var(--nav-height);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE QUESTIONS TABLE
 * Still a .fc-matrix — the whole of it is in knowledge.css and these are Build-11's
 * changes to how this one looks. The design's own .fc-qa-grid has no rules anywhere
 * in its stylesheet, so everything below 1100 is ours.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-matrix--questions {
	--matrix-min: 640px;
	--matrix-pad: 20px var(--sp-32);

	/* Out to the hairlines, like the picker above it. */
	margin: 0 -40px;
}

body.fc-ds .fc-matrix--questions .fc-matrix__table {
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The head row is white against the section's bone, which is the whole of the design's fill. */
body.fc-ds .fc-matrix--questions .fc-matrix__head {
	background: var(--fc-white);
}

/*
 * The outer edges belong to the section, not to the table: only the rule BETWEEN the two
 * columns survives, and it is the first column's border-right.
 */
body.fc-ds .fc-matrix--questions th:last-child,
body.fc-ds .fc-matrix--questions td:last-child {
	border-right: 0;
}

/* 40 against the rules, 32 against the seam — the design's asymmetric pair. */
body.fc-ds .fc-matrix--questions th:first-child,
body.fc-ds .fc-matrix--questions td:first-child {
	padding-left: 40px;
}

body.fc-ds .fc-matrix--questions th:last-child,
body.fc-ds .fc-matrix--questions td:last-child {
	padding-right: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE
 * The closing paragraph, the question and the button, on one 720px measure and
 * centred. .fc-ask--center in knowledge.css is the button's half of it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-guide-close {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 * The design ships desktop only. Container queries against `page`, at the
 * theme's own breakpoints — see THE SHELL in layout.css.
 *
 * The questions table is deliberately not among what moves: it scrolls below 640,
 * which is the only honest answer for two columns of long questions in a real
 * <table>. Its INSETS move, because they are the ruled inset and that halves.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	/*
	 * The two ways stack. The comparison is weaker read one after the other than side by
	 * side, and it is still a comparison — seven chips then four, with the counts named
	 * in both headers. The alternative at this width is two columns too narrow to hold a
	 * sentence, which is not a comparison at all.
	 */
	body.fc-ds .fc-ways {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}

	/* The vendor head stacks, and the 32px either side of the line becomes one gap. */
	body.fc-ds .fc-guide-vendors__head {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}

	body.fc-ds .fc-guide-vendors__title {
		padding-right: 0;
	}

	body.fc-ds .fc-guide-vendors__copy {
		padding-left: 0;
	}

	/*
	 * The picker stacks: menu over panel, and the seam between them turns from a left
	 * border into a top one, because a rule between two things has to be on the side they
	 * actually meet. The design does exactly this. Note that pick.js does not pin below
	 * this width at all — a sticky block taller than the viewport is a trap on a phone.
	 */
	body.fc-ds .fc-pick__grid {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-pick__stage {
		border-top: var(--stroke-1) solid var(--fc-ink-a20);
		border-left: 0;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-way {
		padding: var(--sp-24) var(--sp-24) var(--sp-32);
	}

	body.fc-ds .fc-way--new .fc-step__chip {
		padding: 18px 22px;
	}

	/* The ruled inset halves here, so everything bled out to it halves with it. */
	body.fc-ds .fc-pick,
	body.fc-ds .fc-matrix--questions {
		margin-inline: -20px;
	}

	body.fc-ds .fc-pick__tab {
		padding-left: 20px;
	}

	body.fc-ds .fc-pick__panel {
		gap: var(--sp-24);
		padding: var(--sp-24) 20px;
	}

	body.fc-ds .fc-matrix--questions th:first-child,
	body.fc-ds .fc-matrix--questions td:first-child {
		padding-left: 20px;
	}

	body.fc-ds .fc-matrix--questions th:last-child,
	body.fc-ds .fc-matrix--questions td:last-child {
		padding-right: 20px;
	}
}

@container page (max-width: 440px) {
	/*
	 * The chip's number moves above its sentence rather than beside it: at a phone's
	 * width a two-digit numeral and a 16px gap take a third of the line and the copy
	 * beside it wraps every three words.
	 */
	body.fc-ds .fc-step__chip {
		flex-direction: column;
		gap: var(--sp-8);
	}
}