/*
 * 2026 design system — the Inventory & Fulfillment Optimization page, and nothing else.
 *
 * Loaded on page-inventory-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, two list treatments and two type roles:
 *
 *   .fc-ifo-kpi      the thirty-nine KPI board: six category columns, hairline seams
 *   .fc-ifo-caps     the capability chips, in both tones
 *   .fc-ifo-saidlist the challenge quotes, a hairline-ruled list in the quote face
 *   .fc-ifo-spec     the 40px serif statement that answers each half's question
 *   .fc-ifo-pull     the 24px Fraunces couplet that hands over to the board
 *
 * Everything this page shares with the other three Knowledge Hub pages is in knowledge.css:
 * the split hero, the 1fr 2fr split, the prose measure. This page adds no primitives — the
 * two type roles are page-scoped on purpose, see THE TWO SIZES below.
 *
 * ── THE BOARD IS THE ONLY REAL WORK ─────────────────────────────────────────
 *
 * Six columns of KPIs, full bleed, a hairline between every pair, reflowing to three, two and
 * one. The whole difficulty is the hairlines: a border-left on every cell doubles against the
 * band's own edges and leaves a rule dangling under a short final row.
 *
 * The board paints the RULE COLOUR and every cell paints bone over it, so the 1px grid gaps
 * ARE the hairlines — present between every pair of cells, absent at the outer edges and under
 * a short final row, because a gap only exists where there are two cells to gap. No
 * :nth-child, no re-keying per breakpoint, and the rules between wrapped rows for free. See
 * THE KPI BOARD for what that replaces.
 *
 * Where the reflow steps are is a measurement, not the export's numbers, and it is the one
 * place this page reads differently from the design at a common width. See RESPONSIVE.
 *
 * ── THE TWO SIZES THAT ARE NOT ROLES YET ────────────────────────────────────
 *
 * .fc-ifo-spec is Instrument Serif at --type-display-40, which is the display face at the
 * size below a section heading — the theme has .fc-display-hero and .fc-display-section and
 * nothing between .fc-display-section and body copy. .fc-ifo-pull is Fraunces at
 * --type-h5-24, where the theme's quote role .fc-quote is --type-quote-32.
 *
 * Both are one page's use of an existing token, so neither is promoted. The rule is a second
 * page asking. When one does: .fc-ifo-spec belongs beside .fc-display-section in layout.css
 * as a third display step, and .fc-ifo-pull beside .fc-quote as a small quote.
 *
 * ── WHAT THE DESIGN DRAWS INLINE AND THIS DOES NOT ──────────────────────────
 *
 * The export styles every element inline, including the section grounds, the two ruled
 * verticals down the ink section and the colour of every piece of type on it. Here the
 * grounds are THE GROUNDS below, the verticals are .fc-ruled--dark on the section, and the
 * ink colours are one block — ON INK — because the heading and .fc-meta set no colour of
 * their own, so they inherit and would otherwise come out ink on ink.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GROUNDS
 * Two sections on white and one on ink, in a page that is otherwise the body's
 * bone. Stated here rather than as inline block styles so a section's surface is
 * one line in a stylesheet instead of an attribute inside stored post_content
 * that only a resync can reach.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ifo-inventory,
body.fc-ds .fc-ifo-nutshell {
	background: var(--fc-white);
}

body.fc-ds .fc-ifo-fulfillment {
	background: var(--fc-ink-12);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE TWO SIZES
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * The couplet that hands the "what is it?" section over to the board. Held much
 * narrower than the prose above it so the two questions break where the design
 * breaks them, one per line.
 */
body.fc-ds .fc-ifo-pull {
	margin: 0;
	max-width: 520px;
	color: var(--fc-ink-12);
	font-family: var(--font-quote);
	font-size: var(--type-h5-24);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-quote);
}

/*
 * The statement that answers each half's question: five conditions on five lines
 * on the white section, two sentences on the ink one. text-wrap: pretty rather
 * than balance — the inventory one is already broken by hand and only the
 * fulfillment one wraps, so there is nothing to balance and something to keep
 * off a widow.
 */
body.fc-ds .fc-ifo-spec {
	margin: 0;
	color: var(--fc-ink-12);
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-display-40);
	line-height: 1.15;
	letter-spacing: var(--ls-display);
	text-wrap: pretty;
}

/*
 * 40 between the statement, the line under it and the capability block — wider
 * than the 32 the prose sections use, because the statement is display-sized and
 * a 32 gap under 40px serif reads as a paragraph break rather than a change of
 * register.
 */
body.fc-ds .fc-ifo-body {
	--stack-gap: 40px;

	max-width: 720px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE KPI BOARD
 * Six category columns and thirty-nine numbered KPIs, full bleed to the page's
 * edges, with a hairline above, below and between every pair of cells.
 *
 * The band is NOT ruled. Every other section on this page carries .fc-ruled and
 * pays its 40px inset; this one bleeds, and its cells each paint an opaque ground
 * at z-index 0, so a ruled column's verticals would be covered by the very cells
 * that are supposed to sit inside them. The band's own seams do that job instead.
 *
 * THE SEAMS ARE THE GRID GAP, and that is the whole trick: the board paints the
 * RULE COLOUR and every cell paints bone over it, so each 1px gap is a hairline
 * and there is no gap — and therefore no hairline — at the board's outer edges or
 * under a short final row. It draws the horizontal rules between wrapped rows for
 * free, and it is the same three declarations at six columns, at three, at two and
 * at one.
 *
 * The export does this with a box-shadow on every cell and a :nth-child(6n+1)
 * exception for the first cell of each row, re-keyed to 3n+1 and 2n+1 at each
 * breakpoint. That works, and it means the column count is written in four places
 * instead of one: change the tier and forget the key, and the rules land mid-row
 * with nothing to say so. Not worth carrying for an effect the gap already gives.
 *
 * background-clip: content-box is what keeps the rule colour out of the gutter
 * padding while the top and bottom borders still run the full width of the page —
 * a background is clipped to the content box, a border is not.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ifo-kpi {
	display: grid;
	position: relative;
	z-index: 0;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--stroke-1);
	padding: 0 var(--gutter-page);
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
	background: var(--fc-ink-a20);
	background-clip: content-box;
}

body.fc-ds .fc-ifo-kpi__col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	padding: 28px var(--sp-24) var(--sp-32);
	background: var(--fc-bone);
}

/*
 * Two lines reserved for the category name whether it takes them or not, so every
 * column's first KPI starts on the same baseline. "Fulfillment & Logistics" and
 * "Customer Service" wrap at six columns and "Store" never will; without the
 * floor the board's top row is a staircase. Kept at every multi-column tier rather
 * than only at six, because a wrap at two columns misaligns a pair just as
 * visibly — and released at one column, where there is nothing to align to.
 */
body.fc-ds .fc-ifo-kpi__head {
	display: block;
	min-height: 2.6em;
	color: var(--fc-ink-12);
	line-height: var(--lh-snug);
}

body.fc-ds .fc-ifo-kpi__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A fixed 34px column for the number and the rest for the label, so a two-line
 * label hangs against the number rather than under it. Baseline-aligned, because
 * the number is Fraunces and the label is Instrument Sans at the same size — two
 * faces at one size do not share a top edge.
 */
body.fc-ds .fc-ifo-kpi__row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: baseline;
}

body.fc-ds .fc-ifo-kpi__n {
	color: var(--fc-ink-a60);
	font-family: var(--font-quote);
	font-size: var(--type-body-16);
	letter-spacing: var(--ls-quote);
}

/*
 * --type-body-16, not --type-body-18. The export sets these labels in its own
 * --type-body-18, which is 18px there; this theme's --type-body-18 is 20px and its
 * --type-body-16 is the 18px one. So the token that matches the design is the one
 * named 16, which is also the site's standing body size. See the reading-size note
 * at the head of layout.css, where the +2 shift is set out.
 *
 * overflow-wrap is the floor under RESPONSIVE below: the tiers are chosen so the
 * longest label ("Implementation time") never has to break, and this is what
 * happens if a future KPI is longer than any of the thirty-nine measured — a break
 * rather than text running out through the seam.
 */
body.fc-ds .fc-ifo-kpi__label {
	color: var(--text-on-light);
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/*
 * The violet strip under the board, which is what the board counts up to. Inset
 * to the page gutter rather than bleeding, so it reads as the board's total
 * rather than as a band of its own.
 */
body.fc-ds .fc-ifo-kpi__total {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	margin: 0 var(--gutter-page);
	padding: var(--sp-16) var(--sp-24);
	background: var(--fc-violet);
}

body.fc-ds .fc-ifo-kpi__total > .fc-copy {
	margin: 0;
	color: var(--fc-white);
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CAPABILITY CHIPS
 * A wrapping row of outlined tags: what each half of the problem looks like
 * inside an order management system. A list, drawn as tags — see the note on
 * fluent_commerce_ds_inventory_caps_markup() for why it stays a <ul>.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ifo-caps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fc-ds .fc-ifo-cap {
	padding: 10px 18px;
	border: var(--stroke-1) solid var(--fc-ink-a20);
	color: var(--text-on-light);
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
}

/*
 * On ink, both the outline and the label move to the bone ramp. The label sits at
 * 80% rather than at full bone so the chips stay quieter than the statement above
 * them — a wall of thirteen tags at full contrast would out-shout the sentence
 * they illustrate.
 */
body.fc-ds .fc-ifo-caps--dark .fc-ifo-cap {
	border-color: var(--fc-bone-a20);
	color: var(--fc-bone-a80);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CHALLENGES
 * Fourteen things customers say, in two columns, each a hairline-ruled list under
 * a category label. In the quote face at body size, for the reason in
 * fluent_commerce_ds_inventory_challenges_markup(): they are a list of things
 * people say, not one pulled quote.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ifo-challenges__body {
	max-width: 900px;
}

body.fc-ds .fc-ifo-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-54);
}

body.fc-ds .fc-ifo-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

body.fc-ds .fc-ifo-group > .fc-eyebrow {
	color: var(--fc-ink-12);
}

/*
 * A rule above the first item and below every item, which nets out to a ruled
 * list closed at both ends. border-top on the list and border-bottom on each
 * row — not a border-bottom on all but the last, because the closing rule is what
 * makes the two columns end level even when one runs longer.
 */
body.fc-ds .fc-ifo-saidlist {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	list-style: none;
}

body.fc-ds .fc-ifo-said {
	padding: 20px 0;
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
	color: var(--text-on-light);
	font-family: var(--font-quote);
	font-size: var(--type-body-16);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-quote);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ON INK
 * .fc-display-section, .fc-eyebrow and .fc-meta set no colour — they inherit,
 * which is what lets them sit on any ground. Nothing sets that ground on a section
 * this dark, so they are stated here. There is no fc-eyebrow-dark or fc-meta-dark
 * in this theme; if a third dark section wants them, that is the day to add the
 * pair beside .fc-copy--dark in layout.css rather than to copy this block.
 *
 * The heading is the one that bites, because it half works: the .fc-em-dark span
 * inside it is coloured, so "fulfillment optimization" comes out in light violet
 * and reads as the whole heading, while "What does" and "actually mean?" sit ink
 * on ink and are simply not there. The band under .fc-band--waves and the home
 * page's signal section both do the same thing — a page-scoped h2 colour inside
 * the dark section — so this follows them.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ifo-fulfillment .fc-display-section {
	color: var(--text-on-dark);
}

body.fc-ds .fc-ifo-fulfillment .fc-ifo-spec {
	color: var(--text-on-dark);
}

body.fc-ds .fc-ifo-fulfillment .fc-meta {
	color: var(--fc-bone-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 * @container page, against the named container in layout.css, so the same markup
 * reflows inside the editor's canvas as well as in the front end.
 *
 * The board steps 6 → 3 → 2 → 1, and the counts are divisors of six on purpose:
 * any other number leaves an orphan row of one or two cells hanging off the end of
 * an otherwise square board.
 *
 * ── WHERE THE FIRST STEP IS, AND WHY IT IS NOT WHERE THE EXPORT PUTS IT ─────
 *
 * The export goes 6 → 3 at 1400. Measured against the shipped type, six columns do
 * not fit at 1400 on this site and they do not fit at 1400 in the export either —
 * this is the design file being drawn at 1920 and the tier never being checked at
 * the width it claims.
 *
 * The board's real constraint is the longest word in the thirty-nine labels, since
 * a word cannot wrap: "Implementation" is 135px at the label's 18px Instrument Sans
 * 500. Add the 34px numeral column, its 8px gap and the cell's 2 × 24px padding and
 * a cell needs 225px, so six of them need 1350px of content. The page's gutter is
 * 207px a side above 1500, which puts the six-column floor at 1764px.
 *
 * So: 1760, rounded down to the nearest ten from a measurement rather than picked.
 * It is not one of the theme's breakpoints and it is not meant to be — the other
 * three steps below are (900, 820, 640), because they are about the page, and this
 * one is about the length of a word.
 *
 * What that means in practice: a 1920 display gets the design's six columns, and
 * every ordinary laptop between 1280 and 1728 gets three wide ones instead of six
 * cramped ones with "Implementation" and "appeasements" broken across lines. The
 * board is a reference table, so three legible columns beat six clipped ones.
 * FLAGGED at hand-off as the one place this page reads differently from the export
 * at a common width.
 *
 * The steps below the first are the export's, with its 600 rounded to the theme's
 * 640: two columns still hold a 225px cell there (560px of content at the 40px
 * gutter), and a page-specific breakpoint 40px off the house one is a thing to
 * maintain for no gain.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1760px) {
	body.fc-ds .fc-ifo-kpi {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container page (max-width: 900px) {
	body.fc-ds .fc-ifo-kpi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two columns of quotes at 900 leaves each about 20 characters wide. */
	body.fc-ds .fc-ifo-groups {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-ifo-body {
		--stack-gap: var(--sp-32);
	}
}

@container page (max-width: 640px) {
	body.fc-ds .fc-ifo-kpi {
		grid-template-columns: 1fr;
	}

	/*
	 * Nothing to line the category names up against once the columns are stacked,
	 * so the two-line floor comes off — a heading that does not wrap would
	 * otherwise be followed by 1.3em of nothing, six times.
	 *
	 * The seams need no change at all: at one column the grid still has a 1px row
	 * gap and the board still paints the rule colour through it, so each cell after
	 * the first is separated from the one above it by the same hairline that
	 * separated the columns. That is the gap technique paying for itself.
	 */
	body.fc-ds .fc-ifo-kpi__head {
		min-height: 0;
	}
}