/*
 * Invoice & AP Workflow (/solutions/invoice-ap-workflow/) — page assets.
 *
 * Enqueued for this one `solution` post only (see
 * iss_enqueue_invoice_ap_assets() in functions.php), declaring `iss-global` as
 * a dependency so it lands after it and can override it.
 *
 * WHY A SEPARATE FILE. Everything here is the V6 Clean HTML's own
 * capability-detail diagrams — intake chips resolving into a captured record,
 * three compared nodes, a variance table under an alert banner, an approver
 * chain, an accounting sheet, validated inputs feeding an ERP transaction card.
 * They are AP-specific by subject, they are the bulk of this page's remaining
 * CSS, and iss-global.css is the file every concurrent page build is already
 * queueing on. Anything here that turns out to be genuinely shared should
 * MOVE to iss-global.css rather than being copied into the next page's file.
 *
 * Selectors still carry `.iss-page` so specificity matches iss-global's and
 * the override order is the load order, not a specificity race.
 *
 * Colour values are the Clean HTML's own. Where it uses a hex that has no
 * --iss-* token, the hex is kept rather than being rounded to the nearest
 * token: these panels are a tinted system of their own (amber exception,
 * green clean-match, blue routing) and snapping them to the site palette is
 * what would make them stop reading as states.
 */

/* ============================================================
   1. CAPABILITY DETAIL — section grounds
   ============================================================ */
/*
 * The V6 zebra is light / soft / light / soft / light / deep.
 *
 * WHICH sections are tinted is no longer this file's business: iss-global.css
 * §24c now keys the tint on `.iss-cap-detail-soft`, which single-solution.php
 * sets per capability, and this page sets `cap_detail_zebra_start` to "second"
 * so 01/03/05 stay white and 02/04 are tinted. The full-bleed geometry is
 * there too, since the tint is a section ground in all three packages.
 *
 * What IS this page's own: the fill. Purchasing and Supplier Lifecycle use a
 * flat `--iss-bg`; V6 uses a soft top-to-bottom gradient. And the light
 * sections paint white explicitly rather than inheriting the page ground, as
 * `.capability-detail.light` does.
 */
.iss-page .iss-cap-detail { background: #fff; }
.iss-page .iss-cap-detail-soft { background: linear-gradient(180deg, #f5f9fc, #fbfdff); }

/* ============================================================
   2. CAPABILITY DETAIL — copy column
   ============================================================ */
/* `.detail-proofline span` — pills, not bare mono text. */
.iss-page .iss-cap-detail-tags span {
	padding: 7px 9px;
	border-radius: 999px;
	background: #f1f7fb;
	color: #4a6679;
	font-family: inherit;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .025em;
	text-transform: none;
}
.iss-page .iss-cap-detail-dark .iss-cap-detail-tags span {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	color: #d7e9f2;
}

/* ============================================================
   3. CAPABILITY PANEL — shell shared by all six layouts
   ============================================================ */
.iss-page .iss-capv {
	position: relative;
	padding: 24px;
	min-height: 390px;
	border-radius: 22px;
	overflow: hidden;
}
/* The blue→cyan hairline across the top edge of every panel. */
.iss-page .iss-capv::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--iss-blue), var(--iss-cyan));
}
.iss-page .iss-capv .iss-cap-visual-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
	padding-bottom: 0;
	border-bottom: 0;
}
/* Sentence case and sans, per the Clean HTML's `.visual-head strong` — the
   shared toolbar sets mono uppercase, which turned every panel's own name
   into another eyebrow competing with the real one beside it. */
.iss-page .iss-capv .iss-cap-visual-toolbar > span:first-child {
	font-family: var(--iss-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--iss-navy);
}
.iss-page .iss-cap-detail-dark .iss-capv .iss-cap-visual-toolbar > span:first-child { color: #fff; }

.iss-page .iss-capv-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 9px;
	border-radius: 999px;
	background: #eaf7f1;
	color: #16805d;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}
.iss-page .iss-capv-status .iss-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #26b584;
	box-shadow: none;
}
.iss-page .iss-cap-detail-dark .iss-capv-status { background: rgba(82, 224, 178, .10); color: #a9f2d9; }
.iss-page .iss-cap-detail-dark .iss-capv-status .iss-pulse { background: #52e0b2; }

/* `.visual-footer` — a tinted note, not the bare muted line the shared panel
   ends with. */
.iss-page .iss-capv .iss-cap-visual-footer {
	margin-top: 14px;
	padding: 13px 15px;
	border-radius: 13px;
	border: 1px solid #d4ebf7;
	border-top: 1px solid #d4ebf7;
	background: #edf7fd;
	color: #315c76;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.45;
}
.iss-page .iss-cap-detail-dark .iss-capv .iss-cap-visual-footer {
	background: rgba(57, 195, 230, .08);
	border-color: rgba(143, 226, 245, .13);
	color: #d2ebf5;
}

/* The record card both `capture` and `voucher` resolve to. */
.iss-page .iss-capv-card {
	padding: 16px;
	border: 1px solid #dce7ef;
	border-radius: 15px;
	background: #fbfdff;
}
.iss-page .iss-capv-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.iss-page .iss-capv-card-head strong { font-size: 13px; color: var(--iss-navy); }
.iss-page .iss-capv-card-head span {
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7790a2;
}
.iss-page .iss-capv-card-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid #e8eef3;
	font-size: 12px;
}
.iss-page .iss-capv-card-row:first-of-type { border-top: 0; }
.iss-page .iss-capv-card-row > span { color: #7890a2; font-weight: 800; }
.iss-page .iss-capv-card-row > b { color: #2d475a; font-weight: 800; }

/* ============================================================
   4. LAYOUT: capture — intake chips → captured record
   ============================================================ */
.iss-page .iss-capv-sources {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}
.iss-page .iss-capv-source {
	display: grid;
	place-items: center;
	gap: 5px;
	min-height: 70px;
	padding: 11px 8px;
	border: 1px solid #dce8ef;
	border-radius: 12px;
	background: #f8fbfd;
	text-align: center;
}
.iss-page .iss-capv-source b { font-size: 12px; color: var(--iss-navy); }
.iss-page .iss-capv-source span { font-size: 9px; color: #7c91a1; }
.iss-page .iss-capv-source-ico {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: 8px;
	background: #e8f5fc;
	color: var(--iss-blue);
	font-size: 12px;
	font-weight: 900;
}
.iss-page .iss-capv-arrow-down {
	margin: 3px 0 8px;
	color: var(--iss-blue);
	font-size: 21px;
	font-weight: 900;
	text-align: center;
	line-height: 1;
}

/* ============================================================
   5. LAYOUT: match — three compared nodes + outcome boxes
   ============================================================ */
.iss-page .iss-capv-nodes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	gap: 7px;
	align-items: stretch;
	margin-top: 13px;
}
/* The link glyphs are fixed-width columns between flexible node columns; with
   three nodes that is 1fr 34px 1fr 34px 1fr, which `grid-auto-flow: column`
   cannot express on its own. */
.iss-page .iss-capv-nodes { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); }
.iss-page .iss-capv-node {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 140px;
	padding: 15px 12px;
	border: 1px solid #dce8ef;
	border-radius: 14px;
	background: #fbfdff;
}
.iss-page .iss-capv-node strong { margin-bottom: 9px; font-size: 13px; color: var(--iss-navy); }
.iss-page .iss-capv-node span { font-size: 10px; line-height: 1.55; color: #688093; }
.iss-page .iss-capv-node-link {
	display: grid;
	place-items: center;
	color: var(--iss-blue);
	font-size: 21px;
	font-weight: 900;
}
.iss-page .iss-capv-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin-top: 13px;
}
.iss-page .iss-capv-summary-box {
	padding: 12px;
	border: 1px solid #d5eee4;
	border-radius: 12px;
	background: #edf8f4;
}
.iss-page .iss-capv-summary-box b { display: block; margin-bottom: 3px; font-size: 11px; color: #21674f; }
.iss-page .iss-capv-summary-box span { font-size: 10px; color: #60798a; }
.iss-page .iss-capv-summary-box.iss-capv-warn { background: #fff7ea; border-color: #f1dfbf; }
.iss-page .iss-capv-summary-box.iss-capv-warn b { color: #996217; }

/* ============================================================
   6. LAYOUT: exception — alert banner + variance table + routing
   ============================================================ */
.iss-page .iss-capv-banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	margin-bottom: 13px;
	padding: 14px;
	border: 1px solid #efdcb9;
	border-radius: 14px;
	background: #fff7ea;
}
.iss-page .iss-capv-banner-ico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #fff0d8;
	color: #b56e13;
	font-weight: 900;
}
.iss-page .iss-capv-banner strong { display: block; font-size: 13px; color: #7c521c; }
.iss-page .iss-capv-banner span { font-size: 10px; color: #9b7950; }
.iss-page .iss-capv-banner-pill {
	padding: 6px 8px;
	border-radius: 999px;
	background: #fff0d8;
	color: #986114;
	font-size: 9px;
	font-weight: 900;
	white-space: nowrap;
}
.iss-page .iss-capv-route {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 13px;
}
.iss-page .iss-capv-route-node {
	flex: 1;
	padding: 10px;
	border-radius: 11px;
	background: #edf7fd;
	color: #35657f;
	font-size: 10px;
	font-weight: 800;
	text-align: center;
}
.iss-page .iss-capv-route-arrow { color: var(--iss-blue); font-weight: 900; }

/* ============================================================
   7. Four-column panel table — exception's variance table, coding's sheet
   ============================================================ */
.iss-page .iss-capv-table {
	border: 1px solid #dce8ef;
	border-radius: 14px;
	overflow: hidden;
}
.iss-page .iss-capv-table-row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr .8fr;
	font-size: 11px;
}
.iss-page .iss-capv-sheet .iss-capv-table-row { grid-template-columns: 1.4fr 1fr 1fr .8fr; }
.iss-page .iss-capv-cell {
	padding: 10px;
	border-top: 1px solid #e7eef3;
	color: #355064;
	min-width: 0;
}
.iss-page .iss-capv-cell + .iss-capv-cell { border-left: 1px solid #e7eef3; }
.iss-page .iss-capv-table-head .iss-capv-cell {
	border-top: 0;
	background: #f5f9fc;
	color: #71889a;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.iss-page .iss-capv-cell-bad { color: #b16c14; font-weight: 900; }
.iss-page .iss-capv-sheet .iss-capv-cell-ok { color: #16805d; font-weight: 900; }

/* ============================================================
   8. LAYOUT: approval — approver chain + rule strip
   ============================================================ */
.iss-page .iss-capv-chain { display: grid; gap: 10px; margin-top: 5px; }
.iss-page .iss-capv-chain-row {
	display: grid;
	grid-template-columns: 43px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 13px 14px;
	border: 1px solid #dce7ef;
	border-radius: 14px;
	background: #fbfdff;
}
.iss-page .iss-capv-avatar {
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	border-radius: 12px;
	background: #e9f5fc;
	color: var(--iss-blue);
	font-size: 11px;
	font-weight: 900;
}
.iss-page .iss-capv-chain-row strong { display: block; margin-bottom: 2px; font-size: 12px; color: var(--iss-navy); }
.iss-page .iss-capv-chain-row span { font-size: 10px; color: #718798; }
.iss-page .iss-capv-state {
	padding: 6px 8px;
	border-radius: 999px;
	background: #eaf7f1;
	color: #16805d;
	font-family: var(--iss-mono);
	font-size: 8px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}
.iss-page .iss-capv-state-wait { background: #eef3f7; color: #708596; }
.iss-page .iss-capv-strip {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 3), minmax(0, 1fr));
	gap: 8px;
	margin-top: 13px;
}
.iss-page .iss-capv-strip span {
	padding: 10px;
	border-radius: 10px;
	background: #f2f8fb;
	color: #4f6d80;
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
}

/* ============================================================
   9. LAYOUT: coding — validation note under the sheet
   ============================================================ */
.iss-page .iss-capv-context {
	margin-top: 13px;
	padding: 13px 14px;
	border: 1px solid #d5eaf6;
	border-radius: 13px;
	background: #edf7fd;
}
.iss-page .iss-capv-context strong { display: block; margin-bottom: 4px; font-size: 11px; color: #235a78; }
.iss-page .iss-capv-context span { font-size: 10px; line-height: 1.5; color: #638092; }

/* ============================================================
   10. LAYOUT: voucher — validated inputs → ERP transaction card
   ============================================================
 * The only layout that lives on the dark capability, so its tints are the
 * glass set rather than the light one.
 */
.iss-page .iss-capv-flow {
	display: grid;
	/*
	 * The Clean HTML's own ratio is 1fr / 48px / 1.08fr, drawn in a 559px
	 * panel. Ours is 529px (see the COLUMN WIDTH note in §14b), and at the
	 * package's ratio that left the card 175px of content for a 23px
	 * "QAD AP Voucher" that needs ~190 — it broke onto two lines, which is a
	 * more visible break from the mockup than the ratio is. Width, not type
	 * size, per CLAUDE.md's fix order.
	 */
	grid-template-columns: minmax(0, .92fr) 40px minmax(0, 1.28fr);
	gap: 12px;
	align-items: stretch;
	margin-top: 4px;
}
.iss-page .iss-capv-inputs { display: grid; gap: 8px; }
.iss-page .iss-capv-input {
	padding: 11px 12px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 11px;
	background: rgba(255, 255, 255, .05);
	color: #d7e9f2;
	font-size: 11px;
	font-weight: 800;
}
/* The tick is drawn rather than typed, so the ACF value stays plain text. */
.iss-page .iss-capv-input::before { content: "\2713\00a0"; color: var(--iss-sky); }
.iss-page .iss-capv-arrow-right {
	display: grid;
	place-items: center;
	color: var(--iss-sky);
	font-size: 27px;
	font-weight: 900;
}
.iss-page .iss-capv-voucher .iss-capv-card {
	padding: 18px;
	border: 1px solid rgba(143, 226, 245, .20);
	border-radius: 16px;
	background: rgba(12, 115, 201, .13);
}
.iss-page .iss-capv-voucher .iss-capv-card-head { display: block; margin-bottom: 14px; }
.iss-page .iss-capv-voucher .iss-capv-card-head strong {
	display: block;
	margin-bottom: 4px;
	font-size: 23px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #fff;
}
.iss-page .iss-capv-voucher .iss-capv-card-head span {
	display: block;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #9fc5d7;
}
.iss-page .iss-capv-voucher .iss-capv-card-row {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 8px 0;
	border-top-color: rgba(255, 255, 255, .09);
}
.iss-page .iss-capv-voucher .iss-capv-card-row > span { color: #93b6c8; font-weight: 400; }
.iss-page .iss-capv-voucher .iss-capv-card-row > b { color: #e7f5fb; font-weight: 800; text-align: right; }
.iss-page .iss-capv-complete {
	margin-top: 13px;
	padding: 12px 13px;
	border: 1px solid rgba(82, 224, 178, .14);
	border-radius: 12px;
	background: rgba(82, 224, 178, .10);
	color: #baf4df;
	font-size: 11px;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ============================================================
   11. REAL-TIME QAD INTEGRATION — the "real time" caption
   ============================================================ */
.iss-page .iss-qad-swap {
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1;
}
.iss-page .iss-qad-swap-label {
	display: block;
	margin-top: 5px;
	font-family: var(--iss-mono);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #a4c5d5;
}

/* 12. iASSIST — "Human-Directed." is cyan.
 * Nothing needed here: iss-global.css §16c already colours
 * `.iss-ai-callout-accent`, and iss_split_accent_sentence() (added with this
 * page) is what emits the span it was written for.
 */

/* ============================================================
   13. CUSTOMER PROOF — the Somero card
   ============================================================ */
/* `.proof-metric span` is sans title case, not another mono eyebrow, and the
   `+` stays white with the digits instead of picking up the cyan the shared
   stat component gives a metric's unit glyph. */
.iss-page .iss-snap-teaser-metric .iss-mnum .iss-u { color: #fff; }
.iss-page .iss-snap-teaser-metric > span {
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: #b9d5e2;
}
/* The featured-story label is a bare eyebrow in the Clean HTML; the shared
   `.iss-eyebrow` pill put a bordered chip at the top of the light half. */
.iss-page .iss-snap-teaser-light .iss-eyebrow {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* ============================================================
   14. FINAL CTA
   ============================================================ */
/* `.closing-line` — sans, sentence case, tracked tight. The shared summary
   line is mono uppercase, which at this length wrapped onto two lines and
   read as a nav strip rather than a summary. */
.iss-page .iss-cta-summary {
	font-family: inherit;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .045em;
	text-transform: none;
	color: #d4eff7;
}

/* ============================================================
   14b. SPECIFICITY PASS — rules that lost to a shared rule
   ============================================================
 * Everything below was already declared above (or in iss-global.css) at a
 * specificity a shared rule beat, so the page rendered the site default and
 * not the Clean HTML's value. They are collected here rather than folded back
 * in so the reason is documented once: each selector names the extra ancestor
 * it needs, and the comment says which shared rule it has to clear.
 *
 * Verified by diffing getComputedStyle against the served Clean HTML rather
 * than by screenshot — four of these (the h2/lead margins, the closing line,
 * the proof headline) look plausible in a screenshot and are wrong.
 */

/* `.iss-page h2` / `.iss-page p` zero every margin site-wide, and the copy
   column has no grid gap between the heading and its lead, so both collapsed
   onto each other. The Clean HTML sets 18px and 24px. */
.iss-page .iss-cap-detail h2 { margin-bottom: 18px; color: var(--iss-navy-2); }
.iss-page .iss-cap-detail-dark h2 { color: #fff; }
.iss-page .iss-cap-detail .iss-lead {
	margin-bottom: 24px;
	font-size: 17px;
	line-height: 1.65;
}

/* `.detail-check` — 28px rounded square on a solid tint, not the 22px shared
   tick. Beats `.iss-page .iss-tick`. */
.iss-page .iss-cap-detail .iss-tick {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: #eaf6fd;
	color: var(--iss-blue);
}
.iss-page .iss-cap-detail-dark .iss-tick {
	background: rgba(57, 195, 230, .13);
	color: var(--iss-sky);
	box-shadow: inset 0 0 0 1px rgba(143, 226, 245, .08);
}
/* Beats `.iss-page .iss-cap-points li`. */
.iss-page .iss-cap-detail .iss-cap-points li { gap: 12px; color: #486174; }
.iss-page .iss-cap-detail-dark .iss-cap-points li { color: #d5e6ef; }

/* The proofline chips carry their label in caps in the Clean HTML. The chip's
   own text-transform is `none` there because the source text is already
   uppercase; the ACF value is title case so ISS can read and edit it, and the
   transform does the rest. This is the one place the rendered result matches
   the mockup while the computed style deliberately does not. */
.iss-page .iss-cap-detail-tags span { text-transform: uppercase; }

/* Panel name colour, and the full-width grid the Clean HTML's `.detail-grid`
   uses: two equal columns, 62px apart, with no inner max-width. The 1120px cap
   was squeezing the voucher card until "QAD AP Voucher" broke onto two lines. */
.iss-page .iss-capv .iss-cap-visual-toolbar > span:first-child { color: var(--iss-navy-2); }
.iss-page .iss-cap-detail-in.iss-cap-detail-in-visual {
	max-width: none;
	gap: 62px;
}
/* `.capability-detail` is 94px top and bottom. Two shared rules are in the way:
   `.iss-cap-detail.iss-cap-detail` sets the clamp, and — because every one of
   these sections carries `.iss-tight` — §3's `.iss-tight + .iss-tight` pair
   rule restores the clamped top padding at (0,5,0). Hence five classes here. */
.iss-page .iss-section.iss-cap-detail.iss-cap-detail.iss-cap-detail {
	/*
	 * `padding-block`, NOT the `padding` shorthand. The shorthand also sets
	 * padding-inline, and a bled section's padding-inline is what puts back the
	 * width its negative margin took away — zero it and the section's CONTENT
	 * box resolves against the viewport instead of the column, which pulls its
	 * `.iss-wrap` 20px from the edge on a phone while every unbled section
	 * beside it stays at 40px. Exactly the trap §3's `.iss-bleed` docblock
	 * describes; it read as correct at 1512px, where the wrap's max-width binds
	 * either way, and was wrong at 1024 and 390.
	 */
	padding-block: 94px;
	scroll-margin-top: 94px;
}

/*
 * COLUMN WIDTH — deliberately NOT matched.
 *
 * The Clean HTML's container is 1180px; `.iss-wrap` is 1120px site-wide
 * (`--iss-max`), so every panel here is ~30px narrower than the package draws
 * it and the proof card ~25px. Widening the column for these sections alone
 * would push their left edge 30px outside every other section on the same
 * page, which is a far more visible break than the width itself — so the
 * column stays at the site's value and the two places the lost width actually
 * showed (the voucher card, the iAssist nodes) are handled by their own
 * internal ratios instead. Per CLAUDE.md: between two ways of diverging, take
 * the less visible one and say which you took.
 */
/* `.capability-detail.deep` — the Clean HTML's own angle and stops. */
.iss-page .iss-cap-detail-dark {
	background:
		radial-gradient(circle at 84% 20%, rgba(57, 195, 230, .14), transparent 28%),
		linear-gradient(135deg, #071a2b, #0a3049 60%, #0d4564);
}

/* ---- iAssist: room for the five nodes -------------------------------------
 * The Clean HTML draws the orbit in a 593px card with 188px nodes. The shared
 * light variant is sized for 148px nodes in a 480px box, which wrapped every
 * node title onto two lines. Widening the column is the lever here, per
 * CLAUDE.md's "hero columns" note — the type stays at the package's size.
 *
 * 560px of box: two 188px nodes plus the 150px core circle need 526px before
 * any clearance, so at the shared 480px the side nodes tucked under the circle.
 *
 * GUARDED to >900px, added 2026-09-16. These three rules shipped with no media
 * query at all, so at every width — including a phone — they beat
 * iss-global.css's own `.iss-ai-2col-orbit`/`.iss-ai-orbit`/`.iss-ai-orbit-chip`
 * responsive rules: the grid-column one on specificity (two chained classes
 * here vs. one there), the orbit/chip widths on cascade order (this file loads
 * after iss-global and carries no media query of its own to lose the tie
 * inside iss-global's `@media (max-width: 560px)` block). Confirmed on
 * staging: at 393px the orbit rendered at a fixed 560x520px, core circle
 * bleeding 227px off the right edge of the viewport. 900px is where
 * `.iss-ai-2col-orbit` itself stacks to one column (iss-global.css §"iAssist"
 * media block) — below that these desktop-only widenings have nothing to do.
 */
@media (min-width: 901px) {
	.iss-page .iss-ai-2col.iss-ai-2col-orbit {
		grid-template-columns: 1.06fr .94fr;
		gap: 62px;
	}
	.iss-page .iss-ai-within-light .iss-ai-orbit { width: 560px; height: 520px; }
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip {
		width: 188px;
		border-radius: 15px;
		padding: 15px;
	}
	.iss-page .iss-ai-within-light .iss-ai-orbit-chip { background: rgba(255, 255, 255, .07); }
}
/* `.ai-benefit` is a bordered, gradient card with a shadow, not a flat tint. */
.iss-page .iss-ai-within-light .iss-ai-list-grid li {
	padding: 16px;
	border: 1px solid #c8dfed;
	border-radius: 16px;
	background: linear-gradient(180deg, #f6fbfe, #eef7fc);
	box-shadow: 0 10px 24px rgba(7, 26, 43, .08);
	color: #27465b;
	font-weight: 700;
}
/* `.ai-principle-card` is flat navy with a 20px lead. */
.iss-page .iss-ai-callout { background: #09283e; }
.iss-page .iss-ai-callout strong { font-size: 20px; }

/* ---- Customer Proof ------------------------------------------------------ */
/* `.proof` carries a ground of its own; the section was rendering on plain
   white, so the card had no field to sit on. */
.iss-page #customer-proof {
	background: linear-gradient(180deg, #f5f9fc, #eef5f9);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.iss-page .iss-snap-teaser {
	grid-template-columns: minmax(240px, .88fr) 1.12fr;
	border-radius: 24px;
}
/* The dark half is a flex column that pushes its three blocks apart — the
   snapshot label and metric at the top, the story in the middle, the theme
   line on the floor. Without it the story crowded up under the metric and left
   a third of the panel empty. */
.iss-page .iss-snap-teaser-dark { justify-content: space-between; }
/* `.company` — 32px, the panel's headline. It was rendering at 16px, smaller
   than the "AP Automation for QAD" subhead below it. */
.iss-page .iss-snap-teaser-name {
	margin-top: 10px;
	font-size: 32px;
	font-weight: 950;
	letter-spacing: -.03em;
	color: #fff;
}
.iss-page .iss-snap-teaser-metric { margin-top: 28px; }
.iss-page .iss-snap-teaser-metric .iss-mnum { font-size: 66px; line-height: .95; letter-spacing: -.05em; }
.iss-page .iss-snap-teaser-metric > span { font-weight: 850; }
/* `.proof-content h3` — 31px. Beats `.iss-page .iss-snap-teaser-light h3`. */
.iss-page .iss-snap-teaser-light h3 {
	margin-top: 8px;
	font-size: 31px;
	color: var(--iss-navy-2);
}
/* `.proof-brand-meta` — the theme line is sans title case, not another mono
   eyebrow. It is the third label in that column and uppercasing it made the
   panel read as three headings and no content. */
.iss-page .iss-snap-teaser-foot {
	font-family: inherit;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .035em;
	text-transform: none;
	color: #a9c9d9;
}
/* The pending snapshot link: the live link's shape, dimmed and inert. */
.iss-page .iss-inlink-pending {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--iss-blue);
	font-size: 13px;
	font-weight: 900;
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

/* ---- Final CTA ---------------------------------------------------------- */
/* `.iss-page .iss-cta-band p` (a type selector, so more specific than the
   summary's own class) was setting the size, colour and margin. */
.iss-page .iss-cta-band .iss-cta-summary {
	margin-top: 18px;
	font-size: 11px;
	color: #d4eff7;
}

/* ============================================================
   14c. NON-PO INVOICE PATH  (V11)
   ============================================================
 * The one genuinely new component in the V11 package, and the thing that makes
 * the six-step Workflow Snapshot above it honest: that flow is the PO-BACKED
 * path. V11 introduces touchless approval for invoices that match a QAD PO and
 * receipt, which leaves an obvious unanswered question — what happens to an
 * invoice with no PO to match against. This block is the answer, so it renders
 * directly beneath the step grid and above the QAD backbone.
 *
 * It is deliberately a SECONDARY treatment, not a seventh step: lighter ground,
 * smaller nodes, no step numbers. The main flow stays the main flow and this
 * reads as a branch off it, which is what the Clean HTML draws and what the
 * Developer Notes describe ("Non-PO Invoice Path beneath the core PO-backed
 * flow").
 *
 * THE CONNECTOR AT 25% IS NOT A ROUND NUMBER PICKED FOR LOOKS. The line and dot
 * drop from the horizontal centre of step 02 in the six-column grid above
 * (1.5/6 = 25%), because the first node reads "After Capture & Validate" —
 * step 02 is exactly where an invoice leaves the shared path. If the step grid
 * ever stops being six equal columns, this number has to move with it; it is
 * hidden below 980px, where the grid stops being one row anyway.
 *
 * Colours are the Clean HTML's own, per this file's header note: the routing
 * node is blue (a decision made from data) and the execute node is green (the
 * QAD end-state), matching the same two tints the capability panels use.
 */
.iss-page .iss-nonpo {
	position: relative;
	margin-top: 20px;
	padding: 18px 20px 20px;
	border: 1px solid #cfe2ee;
	border-radius: 18px;
	background: linear-gradient(100deg, #f3f9fd, #eaf5fb);
	box-shadow: 0 10px 28px rgba(7, 26, 43, .07);
}
.iss-page .iss-nonpo::before {
	content: "";
	position: absolute;
	left: 25%;
	top: -21px;
	width: 2px;
	height: 21px;
	background: linear-gradient(180deg, var(--iss-blue), var(--iss-cyan));
	transform: translateX(-50%);
}
.iss-page .iss-nonpo::after {
	content: "";
	position: absolute;
	left: 25%;
	top: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--iss-blue);
	box-shadow: 0 0 0 5px rgba(12, 115, 201, .10);
	transform: translate(-50%, -50%);
}
.iss-page .iss-nonpo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}
/*
 * Drawn as its own label rather than reusing `.iss-kicker`, because this is a
 * component title inside a card, not a section eyebrow — but the dash is
 * `currentColor` at the same weight the site-wide rule uses, so it reads as
 * part of the same family instead of a one-off.
 */
.iss-page .iss-nonpo-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--iss-blue);
	font-family: var(--iss-mono);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .10em;
	text-transform: uppercase;
	white-space: nowrap;
}
.iss-page .iss-nonpo-title::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 10px;
}
.iss-page .iss-nonpo-examples {
	color: #4d6d82;
	font-size: 12px;
	font-weight: 800;
	text-align: right;
}
/*
 * FLEX, NOT THE CLEAN HTML'S GRID, AND THAT IS THE ONE DELIBERATE DIVERGENCE
 * IN THIS COMPONENT. The mockup writes seven explicit tracks — node, arrow,
 * node, arrow, node, arrow, node — which is exact for the four stages this
 * page supplies and silently wrong for any other number: a fifth stage wraps
 * onto an implicit second row with no arrow into it, and a third leaves a
 * dangling empty track. The stages come from an ACF textarea, so the count is
 * an editor's decision, not ours.
 *
 * Flex reproduces the same proportions — every node 1fr, the routing node
 * 1.35fr, every arrow a fixed 26px — while being indifferent to how many
 * there are. Same rendered geometry at four, no failure mode at three or five.
 *
 * One measured consequence, accepted: a grid `fr` track sizes the whole
 * border box while `flex-basis: 0` sizes the content box, so each node's 28px
 * of padding and border sits outside the distributed share. The routing node
 * therefore draws at 1.31x its neighbours where the mockup's track gives
 * 1.35x — 9px on a 1120px row. The underlying distribution is exactly
 * 1 : 1.35 either way; only the padding accounting differs.
 *
 * The routing node gets the wide share because "Data-Driven Approval Routing"
 * is the longest label in the row by some margin, and it is the stage the
 * whole block exists to explain.
 */
.iss-page .iss-nonpo-flow {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
}
.iss-page .iss-nonpo-node { flex: 1 1 0; min-width: 0; }
.iss-page .iss-nonpo-node-routing { flex-grow: 1.35; }
.iss-page .iss-nonpo-arrow { flex: 0 0 26px; }
.iss-page .iss-nonpo-node {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 74px;
	padding: 12px 13px;
	border: 1px solid #d5e6f0;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 5px 14px rgba(7, 26, 43, .04);
}
.iss-page .iss-nonpo-node small {
	display: block;
	margin-bottom: 4px;
	color: var(--iss-muted-2);
	font-family: var(--iss-mono);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/*
 * `--iss-navy-2` (#071a2b), NOT `--iss-navy` (#0a2940). The Clean HTML's own
 * alias block maps its `--navy` to `--iss-navy-2` and its `--navy-2` to
 * `--iss-navy` — the two are swapped relative to what the names suggest, so
 * reaching for the obvious token here renders a visibly lighter title than the
 * approved one. Measured against the served mockup rather than read off the
 * stylesheet: rgb(7,26,43) there, rgb(10,41,64) before this was corrected.
 */
.iss-page .iss-nonpo-node strong {
	display: block;
	color: var(--iss-navy-2);
	font-size: 13px;
	line-height: 1.25;
}
.iss-page .iss-nonpo-node-routing {
	border-color: #bcdff0;
	background: linear-gradient(145deg, #e9f7fd, #f7fcff);
}
/*
 * A DELIBERATE DIVERGENCE FROM WHAT THE MOCKUP RENDERS, because what it renders
 * is a bug in its own stylesheet.
 *
 * The Clean HTML says `color: var(--blue-dark)` here — and `--blue-dark` is
 * never defined in its `:root`. It defines `--iss-blue-dark` and aliases
 * `--blue` and `--blue-2`, but not this one. An undefined custom property is
 * invalid at computed-value time, so the declaration resolves to `unset`, which
 * for an inherited property means `inherit`: the routing title ends up the body
 * ink, rgb(19,40,58), measured on the served mockup.
 *
 * That is LIGHTER than the plain nodes beside it (rgb(7,26,43)) — so the one
 * node the design tints blue, gives a blue border and widens to 1.35 share
 * renders with its title de-emphasised relative to its neighbours. The intent
 * is not ambiguous, and the variable the author meant is one hyphen away in the
 * same file. Implemented as intended per CLAUDE.md's Mockup fidelity rule.
 */
.iss-page .iss-nonpo-node-routing strong { color: var(--iss-blue-dark); }
.iss-page .iss-nonpo-node-execute {
	border-color: #cce7dc;
	background: #f2fbf7;
}
.iss-page .iss-nonpo-arrow {
	display: grid;
	place-items: center;
	color: var(--iss-blue);
	font-size: 20px;
	font-weight: 950;
}
.iss-page .iss-nonpo-note {
	margin-top: 12px;
	color: #49687c;
	font-size: 12px;
	line-height: 1.5;
}
.iss-page .iss-nonpo-note strong { color: var(--iss-navy-2); }

/* ============================================================
   15. RESPONSIVE
   ============================================================
 * Mirrors the Clean HTML's own two capability-panel breakpoints. The panel
 * grids are the part that actually breaks: three side-by-side match nodes and
 * a 4-column table do not survive a phone, and the flow arrows have to turn
 * to point down the page instead of across it.
 */
/*
 * 1100px is NOT this file's usual breakpoint and is not the Clean HTML's
 * either (it stacks its own hero at 1080). It is `iss-global.css`'s — the
 * number where `.iss-wf-grid` breaks from six columns to 3x2, because six
 * columns of prose stop being readable before the rest of the page collapses.
 *
 * The connector has to go at exactly that point. It drops from 25% to meet
 * step 02 in a six-column row; the moment the row becomes 3x2, 25% lands under
 * step 01 in a grid whose second row is somewhere else entirely, and a line
 * pointing confidently at the wrong step is worse than no line. Copying the
 * mockup's 1080 would have left a 20px window where it pointed at nothing.
 */
@media (max-width: 1100px) {
	.iss-page .iss-nonpo::before,
	.iss-page .iss-nonpo::after { display: none; }
	/* No step to line up with any more, so the routing node gives up its
	   extra share and the stages divide the row evenly. */
	.iss-page .iss-nonpo-node-routing { flex-grow: 1; }
	.iss-page .iss-nonpo-arrow { flex-basis: 24px; }
}
@media (max-width: 980px) {
	.iss-page .iss-capv-nodes { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
}
@media (max-width: 690px) {
	.iss-page .iss-capv { padding: 18px; min-height: 0; }
	.iss-page .iss-capv-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/*
	 * `grid-auto-flow: column` (line 238) is still in effect here — it's never
	 * reset above this breakpoint — so collapsing to one column track without
	 * also resetting the flow to `row` just makes the grid invent MORE implicit
	 * columns to place the other 4 children (2 nodes + 2 arrow glyphs) into,
	 * auto-sized by content instead of the explicit 1fr track. Confirmed on
	 * staging: at 393px the three "Real-Time Match" nodes rendered as five
	 * auto-sized columns (0px/19px/99px/19px/109px) squeezed into the row
	 * instead of stacking, with the first node's content overflowing its
	 * near-0-width track. Added 2026-09-16.
	 */
	.iss-page .iss-capv-nodes { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
	.iss-page .iss-capv-node { min-height: 0; }
	.iss-page .iss-capv-node-link { transform: rotate(90deg); min-height: 25px; }
	.iss-page .iss-capv-summary { grid-template-columns: minmax(0, 1fr); }
	.iss-page .iss-capv-table-row,
	.iss-page .iss-capv-sheet .iss-capv-table-row { grid-template-columns: 1.15fr .9fr .9fr .7fr; font-size: 9px; }
	.iss-page .iss-capv-cell { padding: 8px 5px; }
	.iss-page .iss-capv-route { flex-direction: column; align-items: stretch; }
	.iss-page .iss-capv-route-arrow { transform: rotate(90deg); text-align: center; }
	.iss-page .iss-capv-strip { grid-template-columns: minmax(0, 1fr); }
	.iss-page .iss-capv-flow { grid-template-columns: minmax(0, 1fr); }
	.iss-page .iss-capv-arrow-right { transform: rotate(90deg); min-height: 30px; }

	/* Non-PO path: the head's two halves stop competing for one line, and the
	   flow turns to run down the page with its arrows rotated to match. Type
	   size is untouched — the V11 notes are explicit that small screens must
	   not be paid for by shrinking the copy. */
	.iss-page .iss-nonpo { padding: 17px; }
	.iss-page .iss-nonpo-head { flex-direction: column; align-items: flex-start; gap: 5px; }
	.iss-page .iss-nonpo-examples { text-align: left; }
	.iss-page .iss-nonpo-flow { flex-direction: column; }
	.iss-page .iss-nonpo-node { min-height: 0; }
	.iss-page .iss-nonpo-arrow { flex-basis: auto; min-height: 18px; transform: rotate(90deg); }
}