/*
 * 2026 design system — the Legacy OMS Modernization page, and nothing else.
 *
 * Loaded on page-legacy-oms-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 two tables' numbers:
 *
 *   .fc-flow    the three-stage process: a chevron, a hairline and a card per stage
 *
 * 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 and the whole of .fc-matrix.
 * The two matrices here are two custom properties each, which is what that file's
 * --matrix-min / --matrix-pad exist for.
 *
 * This page adds no primitives and no type roles. It did add one: .fc-mark--dark, the white
 * band behind the two cost figures on the ink section, which went to layout.css beside
 * .fc-mark rather than living here — a highlight is a type role, and the next dark section
 * that quotes a number will want it.
 *
 * ── THE CHEVRONS ────────────────────────────────────────────────────────────
 *
 * Each stage's name is a tag with a point on its right, aimed at the next column, which is
 * what makes three cards in a row read as a flow rather than as three cards. The point is a
 * clip-path rather than a border trick or a rotated square: it is one declaration, it clips
 * the background wash exactly, and it costs nothing to draw.
 *
 * It is REMOVED below 1100, where the columns stack — a chevron pointing right at nothing,
 * above the next stage rather than beside it, points the wrong way. See RESPONSIVE.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GROUNDS
 * Two sections on white and one on ink, in the middle of a page that is otherwise
 * the body's bone. Stated here rather than as inline block styles so a section's
 * ground is one line in one file.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-legacy-why,
body.fc-ds .fc-legacy-process {
	background: var(--fc-white);
}

/*
 * The ask, on ink. .fc-ruled--dark on the same element inverts the ruled column's
 * verticals for the length of the section; this is the ground under them.
 */
body.fc-ds .fc-legacy-start {
	background: var(--fc-ink-12);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE ASSESSMENT BUTTON
 * The page's conversion, filled violet on ink — .fc-btn--violet, which layout.css
 * introduced for the Security Trust Center and calls the one exception to the
 * three colourways.
 *
 * The hover is overridden here, and it is the one place this page departs from the
 * design on purpose. Two things are wrong with the alternatives:
 *
 *   · The export hovers the label to #121212 on the violet fill. That is about
 *     2.5:1 and fails AA at any size, on the page's primary action.
 *   · The shared .fc-btn--violet:hover fills to ink — which is right on the Trust
 *     Center's bone header and wrong here, because this section's ground IS ink.
 *     The button would disappear and reappear as an outline.
 *
 * So the fill and the label hold and only the border moves, to the design's white.
 * On a violet fill on ink that is a clear state change and it keeps 4.5:1 through
 * it. Flagged at hand-off as a deviation.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-legacy-start .fc-btn.fc-btn--violet:hover {
	border-color: var(--fc-white);
	background: var(--fc-violet);
	color: var(--fc-white);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BEFORE/AFTER MATRIX
 * The whole of .fc-matrix is in knowledge.css. These are this page's numbers,
 * stated as the custom properties that file reads.
 *
 * Build-11 changed three things about it: the cells got tighter, the table got a
 * 1040px cap and centred inside the column, and the head row picked up a bone fill.
 * The body cells went white in the design too, which is a no-op here — this whole
 * section's ground is already white.
 *
 * The eight-row legacy/modern table used to be the second .fc-matrix on this page
 * and is not one any more. See THE SHIFT LIST below.
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * Before against after against why. Three columns, one of them a full sentence, so it
 * scrolls below 1000 rather than shrinking — the design's own floor, and the reason it
 * survives Build-11's cap is that a real <table> cannot stack to one column the way the
 * design's .fc-compare-3 grid does.
 */
body.fc-ds .fc-matrix--before-after {
	--matrix-min: 1000px;
	--matrix-pad: 14px 20px;
}

body.fc-ds .fc-matrix--before-after .fc-matrix__head {
	background: var(--fc-bone);
}

/*
 * The gaps between the four things stacked in the "Why" section — split, table, band,
 * table. Section-level siblings get no rhythm of their own (that is what .fc-stack is for,
 * and these are not in one), so each states its own top margin, at the design's numbers.
 */
body.fc-ds .fc-legacy-table {
	margin-top: var(--sp-54);
}

/* The design's cap, centred in the column. */
body.fc-ds .fc-legacy-table:not(.fc-legacy-table--second) {
	max-width: 1040px;
	margin-inline: auto;
}

body.fc-ds .fc-legacy-table--second {
	max-width: 620px;
	margin-top: var(--sp-32);
	margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BRIDGE
 * One sentence between the two tables, and Build-11 makes a band of it: a hairline
 * across the full width of the page with the sentence centred under it.
 *
 * The negative margin is the section's own inset paid back — gutter plus the ruled
 * 40 — so the rule runs edge to edge and crosses the ruled column's verticals,
 * which is what the design draws. It has to be restated at 820 because the inset
 * halves there; see THE RULED COLUMN in layout.css.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-legacy-bridge {
	margin: var(--sp-54) calc(-1 * (var(--gutter-page) + 40px)) 0;
	padding-top: var(--sp-54);
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
}

body.fc-ds .fc-legacy-bridge__copy {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

@container page (max-width: 820px) {
	body.fc-ds .fc-legacy-bridge {
		margin-inline: calc(-1 * (var(--gutter-page) + 20px));
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SHIFT LIST
 * Legacy against modern, eight rows of two words. A .fc-matrix until Build-11
 * redrew it as this: 620px wide, centred, horizontal rules only, no scroll frame,
 * and a violet glyph on the modern side of every pair.
 *
 * Rules only on the block axis, which is the difference that took it out of
 * .fc-matrix — no vertical between the two columns and no padding on the outer
 * edges, so the terms sit against the measure rather than inside cells.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-shift {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	text-align: left;
}

body.fc-ds .fc-shift th,
body.fc-ds .fc-shift td {
	padding: 12px 0;
	font-family: var(--font-core);
	font-size: var(--type-body-16);
	line-height: var(--lh-body);
	text-align: left;
	vertical-align: middle;
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The header row is the design's bold pair, at the same size as the rows under it. */
body.fc-ds .fc-shift__head {
	font-weight: var(--fw-bold);
	color: var(--text-on-light);
}

/*
 * The legacy term greys back. It is the row's header and the thing being left behind, and
 * the design says both of those with the one value.
 */
body.fc-ds .fc-shift__legacy {
	font-weight: var(--fw-medium);
	color: var(--text-on-light-muted);
}

/*
 * The modern term and its glyph on one line. The flex is on the cell's contents rather
 * than the cell — display:flex on a <td> takes it out of the table's column model, and
 * the columns are the whole point of a table.
 */
body.fc-ds .fc-shift__modern {
	font-weight: var(--fw-medium);
	color: var(--text-on-light);
}

body.fc-ds .fc-shift__modern > span {
	display: inline-block;
	vertical-align: middle;
}

/* The design's violet, and the design's 12px gap to the term. */
body.fc-ds .fc-shift__icon {
	display: inline-block;
	margin-right: 12px;
	vertical-align: middle;
	color: var(--fc-violet);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE PROCESS FLOW
 * Three equal columns, each a step label over a hairline, a chevron with the
 * stage's name in it, and a card.
 *
 * minmax(0, 1fr) rather than 1fr, which is the one thing in this block that is
 * not obvious: 1fr is min-content-based, so a long unbroken string in a card —
 * "RFL (Ready for Launch) validations" — can push a column wider than its third
 * and overflow the row. A zero minimum lets the columns stay equal and the text
 * wrap.
 *
 * align-items: stretch so the three cards are the same height whatever their
 * copy, which is what makes the row read as one diagram.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-flow {
	margin: var(--sp-72) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-32);
	align-items: stretch;
}

body.fc-ds .fc-flow__step {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}

body.fc-ds .fc-flow__rule {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.fc-ds .fc-flow__line {
	flex: 1;
	height: var(--stroke-1);
	background: var(--fc-ink-a20);
}

/* The chevron. See THE CHEVRONS in the file header. */
body.fc-ds .fc-flow__stage {
	margin: 0;
	padding: 10px 20px;
	background: var(--fc-violet-wash);
	font-family: var(--font-core);
	font-weight: var(--fw-bold);
	font-size: var(--type-body-18);
	line-height: var(--lh-tight);
	color: var(--text-on-light);
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

body.fc-ds .fc-flow__card {
	/* Fills whatever height the row settles on, so the three cards end level. */
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	padding: 28px;
	border: var(--stroke-1) solid var(--fc-violet);
	border-radius: var(--radius-10);
	background: var(--fc-white);
}

body.fc-ds .fc-flow__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.fc-ds .fc-flow__title {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-h5-24);
	line-height: var(--lh-title);
	color: var(--fc-violet);
	text-wrap: pretty;
}

/*
 * What the stage produces. The markers are dropped and the hairline above is the separator
 * instead — the design's treatment, and the items are deliverables rather than prose, each
 * one a line.
 */
body.fc-ds .fc-flow__list {
	margin: 0;
	padding: var(--sp-24) 0 0;
	list-style: none;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.fc-ds .fc-flow__item {
	font-family: var(--font-core);
	font-weight: var(--fw-bold);
	font-size: var(--type-body-18);
	line-height: var(--lh-body);
	color: var(--text-on-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 * The design ships desktop only, apart from the flow — which it does carry a
 * single-column rule for. Container queries against `page`, at the theme's own
 * breakpoints — see THE SHELL in layout.css.
 *
 * The two tables are deliberately not in here: they scroll, which is what the
 * design does and the only honest answer for a three-column comparison of
 * sentences.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	/*
	 * The flow stacks, and the chevrons go with it — the point aims at the next column,
	 * and once the stages are above one another there is no column to the right to aim
	 * at. The design's own rule, and the reason each stage still carries its "Step N".
	 */
	body.fc-ds .fc-flow {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-flow__stage {
		clip-path: none;
	}
}

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