/**
 * The check page.
 *
 * Loaded only for `template-check.php` — the arrangement `home.css`,
 * `warning-signs.css`, `alerts.css`, `part-index.css`, `domain-index.css` and
 * `report.css` all have, and for the same reason: four bands' worth of rules
 * that exactly one URL can reach do not belong in a stylesheet every visitor
 * downloads.
 *
 * **Its dependency is the component sheet, and here that is a fix rather than a
 * precaution.** Two things on this page are the *plugin's* markup re-laid, and
 * both tie with `lc-components.css` on specificity: the hero's field, where
 * `.lc-chkhero__lookup .lc-lookup__input` is (0,2,0) against that sheet's
 * `.lc-domain-check .lc-lookup__input`, and the results panel, where the same
 * weight decides whether the answer sits in a card or bleeds onto the field
 * behind it. Declared against `lieferantencheck-theme` the way `home.css` is,
 * this sheet could be printed *before* the component sheet, lose both ties on
 * source order, and leave a page that looks almost right — which is the failure
 * `.lc-main` and the `lc_languages` filter both took.
 *
 * **Everything below the hero is paper in both colour schemes, and not one
 * declaration in this file says so.** The template carries `.lc-onpaper` on its
 * `<main>` and `.lc-onimage` on the hero and the closing band inside it; both
 * are token re-points in `style.css`, and a custom property declared on a nearer
 * ancestor wins for its own subtree. Every rule here names a semantic token, so
 * the page comes out navy-then-paper-then-navy in either scheme with no
 * `@media (prefers-color-scheme)` anywhere — which is the point, because a media
 * query is a branch the light side silently depends on being written correctly.
 * Section 22 of `tools/test-theme-contrast.php` measures every pair through the
 * pin and fails if a scheme branch appears here.
 *
 * **The commitment furniture is not styled here.** `.lc-railcard`,
 * `.lc-railsteps` and `.lc-railstep` are section 15b of `style.css`;
 * `.lc-railcard__lookup` is `lc-components.css`. This page is their fourth
 * caller and adds one modifier to the set and nothing else.
 *
 * **The results panel is the plugin's and this sheet only gives it a surface.**
 * There is no `display: none` on any block `LC_Lookup` renders and no `content:`
 * carrying a word — the same line `alert.css` draws, and section 22 sweeps for
 * both. A theme deciding which findings a reader sees is the one thing this page
 * must never do.
 *
 * @package LieferantenCheck
 */

/* ==========================================================================
   1. The root
   ========================================================================== */

/*
 * The page grid, not the reading grid. `style.css` narrows `.lc-page`,
 * `.lc-single`, `.lc-archive` and `.lc-404`; this page is bands with a rail and
 * wants the full shell, like `.lc-home`, `.lc-guide`, `.lc-register-page`,
 * `.lc-index-page`, `.lc-domindex-page` and `.lc-report-page`. There is
 * deliberately no rule here narrowing it.
 *
 * Section 7 of the contrast harness derives its list of template roots from the
 * theme's own PHP so a *new* `<main>` cannot open at the old left-heavy grid
 * unremarked, and it has to be told about this one by name.
 */
.lc-check-page {
	display: block;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

/*
 * Two numbers, declared on `.lc-chkhero` rather than on the `--image` modifier,
 * so the grid rule below can never resolve `--lc-chk-split` to nothing: an
 * unresolved `var()` is invalid at computed-value time and would drop the whole
 * `grid-template-columns` declaration rather than fall back to the one-column
 * rule above it.
 */
.lc-chkhero {
	--lc-chk-gap: 2.5rem;
	--lc-chk-split: calc(4 / 7);

	padding-block: clamp(2.5rem, 5.5vw, 3.75rem);
	background: var(--lc-ink);
}

/* Where `lc_theme_check_split()` declined, the hero holds no search box and the
   whole of the plugin's output is in the main column instead. Without this the
   band keeps the bottom padding it was given for a field that is not there. */
.lc-chkhero--nolookup {
	padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

/*
 * **Nothing is ever read on top of the photograph**, at any width. Below 62rem
 * the plate is not rendered at all, so the headline, the lede and the field sit
 * on flat `--lc-ink` and the contrast argument is arithmetic that no photograph
 * can move: white 17.0:1, the soft token 13.1:1, the quiet token 9.0:1, the gold
 * eyebrow 6.6:1.
 */
.lc-chkhero__bg {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

/*
 * `brightness(0.72)`, which is `domain-index.css`'s value for this same
 * photograph rather than a second reading of it — the same picture treated the
 * same way on both pages, which is the call `report.css` made about
 * `Industrielle Armaturen` at 0.68.
 *
 * `Containerterminal` is an aerial of stacked containers whose cream tops are
 * large flat light areas, nothing like `Industrieanlage`'s specular metal, which
 * is why the homepage's 0.58 would be far too dark here. Nothing is read on top
 * of it at any width, so this is not a contrast argument in either direction.
 */
.lc-chkhero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
	filter: grayscale(1) brightness(0.72) contrast(1.05);
}

/* The content sits above the absolutely positioned plate. No `z-index`
   anywhere: the plate is a positioned element earlier in tree order, so paint
   order alone puts the shell over it. */
.lc-chkhero--image {
	position: relative;
}

.lc-chkhero--image > .lc-shell {
	position: relative;
}

.lc-chkhero__grid {
	display: grid;
	gap: var(--lc-chk-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

/*
 * `--lc-t-2xl` and not the homepage's `--lc-t-3xl`, and the number came off the
 * design reference rather than off taste.
 *
 * "Check before you quote or pay" is 29 characters. `1ch` is the advance of `0`,
 * which Inter draws at 0.539em, so at the 64px `--lc-t-3xl` reaches the headline
 * is about 1000px against a column that is 782px at the widest shell — it would
 * break to two lines everywhere, and the reference sets it on one. At the 42px
 * this token reaches it is about 656px and fits with room to spare.
 *
 * `max-width: 22ch` is a backstop against a very wide window rather than a
 * measure, exactly as it is on `.lc-hero__title`: at the split layout the column
 * is the real limit.
 */
.lc-chkhero__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--lc-t-2xl);
	font-weight: 700;
	letter-spacing: -0.026em;
	line-height: 1.08;
	text-wrap: balance;
}

.lc-chkhero__lede {
	max-width: 54ch;
	margin: 0.85rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-md);
	line-height: 1.55;
}

/*
 * The lookup, capped so it does not stretch across the whole column.
 *
 * 34rem is `/domains/`'s figure and the width the reference draws the field and
 * its button at together. It is a cap rather than a width: below it the box is
 * the column. `lc-components.css`'s `.lc-lookup` already carries `max-width:
 * var(--lc-measure)` (44rem), which is wider than this and therefore inert —
 * this is the narrower of the two and wins on the cascade without either having
 * to know about the other.
 */
.lc-chkhero__lookup {
	max-width: 34rem;
	margin-top: 1.35rem;
}

.lc-chkhero__lookup .lc-lookup {
	margin: 0;
	max-width: none;
}

/*
 * The field's visible label is hidden here, which is the third hero to do it and
 * the same departure `home.css` and both index sheets document.
 *
 * It is **not** hidden from assistive technology: the `<label>` is still in the
 * markup, still bound to the field, still the field's accessible name. What is
 * removed is the visible uppercase line, because the lede directly above it
 * already reads "Search a part number, a supplier domain or the address an
 * enquiry came from" and the hint directly below it gives three examples — so
 * the visible label would be the third statement of one idea inside 140px of
 * vertical space. The comment in `home.css` says this label is right *on
 * `/check/`*, and it was, on a page whose only heading was the page title.
 *
 * Copied rather than composed from `.lc-visually-hidden`, because the class is
 * on markup the plugin renders and the theme cannot add to it.
 */
.lc-chkhero__lookup .lc-lookup__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The field is the product, and the brief puts a floor under it: 52px.
 *
 * `min-height` on both halves rather than padding alone, so the pair stays
 * exactly as tall as each other when a translation changes the button's text
 * metrics. 3.25rem is 52px.
 */
.lc-chkhero__lookup .lc-lookup__input {
	min-height: 3.25rem;
	padding-block: 0.9rem;
	border-width: 1px;
	border-color: var(--lc-rule-firm);
	font-size: var(--lc-t-md);
}

.lc-chkhero__lookup .lc-lookup__submit {
	min-height: 3.25rem;
	padding-inline: 1.85rem;
	font-size: var(--lc-t-base);
}

/*
 * A ring rather than a thicker border. The border is 1px and thickening it on
 * focus reflows the monospace value inside by a pixel — visible as a jump on the
 * one string a visitor is reading character by character. `box-shadow` changes
 * no geometry, and the browser's own `:focus-visible` outline still lands on top
 * of it for anyone arriving by keyboard.
 *
 * `background-color` and never the `background` shorthand: this field carries no
 * background image today, but `home.css`'s does, and a shorthand copied from
 * here to there would drop it the moment the field took focus.
 */
.lc-chkhero__lookup .lc-lookup__input:focus {
	border-color: var(--lc-accent);
	background-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 0 3px rgba(200, 155, 50, 0.3);
}

.lc-chkhero__hint {
	max-width: 34rem;
	margin: 0.7rem 0 0;
	color: var(--lc-fg-quiet);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-sm);
	letter-spacing: 0.01em;
}

/*
 * The split, at the same 62rem every other hero uses.
 *
 * The plate's left edge is **derived from the grid rather than checked against
 * it**. As a percentage of the viewport it would be a different distance from
 * the text at every window width — 46px of flat ink at 992 and 843px at 3440 —
 * because the text column's right edge is a fraction of a shell that is capped
 * and centred and the viewport is not.
 *
 * The terms are the shell's left rail, its gutter, column one and the join:
 *
 *   (100% - shell) / 2  +  gutter  +  col1  +  gap
 *
 * `100%` is this section's padding box — `.lc-chkhero` sets no inline padding,
 * so that is the viewport — while the grid's own `100%` is its content box.
 * `--lc-chk-split` is the one number both expressions read, so the join is one
 * grid gap at every width by construction.
 */
@media (min-width: 62rem) {
	.lc-chkhero__bg {
		display: block;
		inset: 0 0 0 calc(
			(100% - min(100%, var(--lc-shell))) / 2
			+ var(--lc-gutter)
			+ (min(100%, var(--lc-shell)) - var(--lc-gutter) * 2 - var(--lc-chk-gap))
				* var(--lc-chk-split)
			+ var(--lc-chk-gap)
		);
	}

	/*
	 * The left edge, dissolved into the ink the text sits on. The stops are
	 * **lengths and not percentages**: a fade sized at a share of the plate grows
	 * with the monitor, so the photograph would start further from the text the
	 * more room there was for it. The job is an edge, and an edge is a fixed
	 * distance.
	 */
	.lc-chkhero__bg::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			var(--lc-ink) 0%,
			rgba(17, 29, 42, 0.62) 3rem,
			rgba(17, 29, 42, 0.34) 18rem
		);
		content: "";
	}

	/*
	 * Column two is deliberately empty. It reserves the plate's width inside the
	 * grid, so the headline, the lede and the field can never run under the
	 * photograph however long a translation turns out to be — and the plate places
	 * itself from the same `--lc-chk-split`, so the reservation cannot fall out of
	 * step with the thing it reserves.
	 */
	.lc-chkhero__grid {
		grid-template-columns:
			calc((100% - var(--lc-chk-gap)) * var(--lc-chk-split))
			minmax(0, 1fr);
	}

	.lc-chkhero__main {
		grid-column: 1;
	}
}

/* ==========================================================================
   3. The assurance bar
   ========================================================================== */

/*
 * A white strip between the navy hero and the light-gray field below it, and
 * both of its boundaries are its own — the same arrangement `.lc-trustbar`
 * documents in section 15b of `style.css`.
 *
 * It is **not** `.lc-trustbar`. That component is one sentence with one glyph;
 * this is a list of three sources with a caveat opposite them, and the two would
 * have had nothing in common but a border. A modifier promising a base class it
 * uses none of is the naming mistake `.lc-sec--paper` made before it became
 * `.lc-onpaper`.
 *
 * The step above is navy to paper at 17:1 and marks itself. The step below is
 * `--lc-bg` to `--lc-band`, which under the pin is #ffffff against #f5f6f8:
 * **1.081:1**, the brand's own light gray, and the exact case section 2b's floor
 * of 1.03 exists to admit *because* a rule is carrying the join. So the bottom
 * hairline is the whole boundary and never decoration.
 */
.lc-chkbar {
	border-bottom: 1px solid var(--lc-rule);
	background: var(--lc-bg);
	font-size: var(--lc-t-ui);
	line-height: 1.5;
}

/*
 * `column-gap` is generous and `row-gap` is not: wrapped, this is two blocks
 * stacked, and the caveat reading as a second paragraph rather than as the other
 * end of the same line is correct.
 */
.lc-chkbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem 2rem;
	padding-block: 0.85rem;
}

.lc-chkbar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-chkbar__item,
.lc-chkbar__caveat {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
}

.lc-chkbar__item {
	color: var(--lc-fg-soft);
}

/*
 * `--lc-fg` and not `--lc-fg-soft`, which every other word on this strip takes.
 *
 * This is the one sentence on the page that contradicts what a reader wants the
 * page to be, and it is the sentence the whole site's disclaimer turns on. Slate
 * would be 5.7:1 and legal; deep navy is 17:1 and reads as the strongest thing
 * on the strip, which is what it is.
 */
.lc-chkbar__caveat {
	color: var(--lc-fg);
	font-weight: 600;
}

/*
 * `--lc-accent` on the three source glyphs: a mark, at 3.29:1 on paper, which
 * clears the 3:1 WCAG 1.4.11 asks of one and is the reason that token exists.
 * The *words* beside them take `--lc-fg-soft` at 5.74:1, because a word answers
 * 4.5:1 and the mark gold does not — the three golds exist for exactly this
 * split.
 */
.lc-chkbar__glyph {
	flex: 0 0 auto;
	color: var(--lc-accent);
}

/*
 * The triangle takes `--lc-danger`, 7.11:1 on paper. It marks a *finding* about
 * the check itself, which is the placement rule `LC_Icons` documents — and it is
 * deliberately not the gold the three source marks use, because it is not one of
 * them. Decorative like every glyph here: the sentence beside it says the whole
 * thing, so `display: none` on the set would lose nothing.
 */
.lc-chkbar__glyph--caveat {
	color: var(--lc-danger);
}

/* ==========================================================================
   4. The main region
   ========================================================================== */

/*
 * The field the answer and the cards sit on, which is `--lc-band` and not paper
 * — the same relationship `.lc-repform`, `.lc-registry`, `.lc-index` and
 * `.lc-domindex` all use and the reference draws: white cards on a light field.
 * At 1.081:1 the step is a mood rather than a boundary, so every card on it also
 * declares a `--lc-rule` edge and the two together make the column read as a
 * column of objects.
 */
.lc-chkmain {
	padding-block: clamp(2rem, 4.5vw, 3.25rem);
	background: var(--lc-band);
}

/*
 * `align-items: start` is what lets the rail be *after* the main column in the
 * DOM and still sit level with the top of it: a grid item goes to the top of its
 * own track whatever its source position. So a reader on a phone meets the
 * answer and then the notes about it, and a reader on a desktop sees both at
 * once — both orders right at the same time, with no `order` property and
 * nothing for a screen reader to disagree with.
 *
 * 76rem is `report.css`'s breakpoint and `alerts.css`'s, kept identical so two
 * pages with the same furniture do not gain their rail at different widths.
 */
.lc-chkmain__grid {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 76rem) {
	.lc-chkmain__grid {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
	}
}

/*
 * **`grid-template-columns: minmax(0, 1fr)` is load-bearing on both of these,
 * and leaving it off cost a 18px sideways scroll at 320px that only appeared
 * once a check had been answered.**
 *
 * A grid track sized `auto` — which is what an implicit column is — cannot be
 * narrower than its content's *min-content* width. Everything the theme puts in
 * this column wraps, so the empty page measured clean at every width from 320
 * up. The plugin's answer does not: `LC_Domain_Check` prints nameservers and an
 * IP address in monospace, and one unbreakable `elliott.ns.cloudflare.com` set
 * the column's minimum to 303px inside a 265px shell — so the *page* scrolled
 * sideways on a phone because of one word in a registry record.
 *
 * `minmax(0, 1fr)` releases the floor and the track becomes the shell again.
 * `.lc-chkmain__grid` already carries it for the same reason and
 * `.lc-chkstep`'s second track does too; these two were the pair that did not,
 * because a single-column grid looks like it cannot have a column problem.
 *
 * Found by sweeping the **answered** page, not the empty one. The empty state is
 * what the design reference draws and what a preview renders, and it is not the
 * state this bug lives in.
 */
.lc-chkmain__main {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: minmax(0, 1fr);
}

.lc-chkmain__rail {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   5. The answer
   ========================================================================== */

/*
 * The card the plugin's own result panel is given, and that is the whole of what
 * this file does to it.
 *
 * `lc-components.css` sets `.lc-results` to `background: none` with a
 * scheme-aware colour, which is right: a block that cannot see what it is
 * rendered on must not hold an opinion about it, and that sheet is the one that
 * knows. So the surface is declared *here*, on a wrapper the theme owns, and
 * every colour inside the panel keeps coming from the component sheet
 * unchanged.
 *
 * **Nothing in this file hides, reorders or rewords any block inside it.** The
 * verdict, the seller table, the registry snapshot, the self-check and the red
 * flags are the plugin's answer to a question about a named business, and a
 * theme deciding which parts of that a reader sees is the one thing this page
 * must never do. Section 22 sweeps this sheet for a `display: none` or a
 * `content:` on any plugin selector and fails on either.
 */
.lc-chkresults {
	padding: clamp(1.25rem, 3vw, 1.85rem);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
}

/*
 * **The panel's own heavy top rule comes off, and only on the split path.**
 *
 * `lc-components.css` gives `.lc-results` a 3px `--lc-fg` rule and 1.75rem of
 * padding above it, and its comment says why: "a single heavy top rule marks
 * where the answer starts". That is right on `page.php`, where the panel is the
 * third block down a flowing prose column and nothing else says the answer has
 * begun. Here the answer is the *first* thing in a bordered white card at the
 * top of the main column, on a field of a different colour — the card is that
 * boundary already, and a second one drawn 28px inside the first reads as a
 * rendering fault rather than as structure. It was: found by screenshotting the
 * live page after deploying, which is the check `docs/theme-design.md` records
 * two shipped bugs for skipping.
 *
 * `:not()` and not a blanket override, because on the **decline** path the box
 * and the answer are in one card together and the rule is doing its original
 * job again — it is the only thing between the search field and the verdict.
 */
.lc-chkresults:not(.lc-chkresults--whole) > .lc-results {
	padding-top: 0;
	border-top: 0;
}

/*
 * **The self-check goes back to one column here.**
 *
 * `lc-components.css` sets `column-count: 2` on `.lc-results
 * .lc-selfcheck__steps` above 62rem, and that was measured against a panel
 * holding the whole 94rem shell — 1408px, so two columns of ~680. This page
 * gives the panel a main column beside a 22.5rem rail: 850px of content at a
 * 1440 viewport and 610px at 1216, which is two columns of 397 and 277. A block
 * containing a form, a registry `<dl>` and monospace nameservers does not fit in
 * 277px; the live page wrapped `elliott.ns.cloudflare.com` across three lines.
 *
 * And the step count is not fixed. `LC_Lookup::self_check()` renders **one**
 * step for a bare `lc_d` and two for a part-number miss, so at one step the
 * two-column rule left the entire right half of the panel empty.
 *
 * `.lc-flags__list` keeps its two columns: those items are one line each, they
 * read fine at 397px, and a single column of them makes the panel much longer
 * for no gain. Same rule, opposite answer, because the content is not the same.
 */
.lc-chkresults .lc-results .lc-selfcheck__steps {
	column-count: 1;
}

/*
 * The decline. `lc_theme_check_split()` did not recognise what the shortcode
 * returned, so the box is in here with the answer instead of in the hero. It
 * gets the same card and one extra rule: the search field is the first thing in
 * it and `.lc-lookup`'s own bottom margin is sized for a prose column.
 */
.lc-chkresults--whole > .lc-lookup {
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   6. How the check works
   ========================================================================== */

.lc-chkhow,
.lc-chkmean {
	padding: clamp(1.25rem, 3vw, 1.85rem);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
}

.lc-chkhow__title,
.lc-chkmean__title {
	margin: 0;
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: -0.012em;
}

.lc-chkhow__lede {
	margin: 0.35rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.5;
}

/*
 * Three steps, side by side from 52rem.
 *
 * A viewport breakpoint and not `auto-fit`: `repeat(auto-fit, minmax(15rem,
 * 1fr))` gives two columns and a widow on any width where three do not fit, and
 * a numbered sequence broken 2 + 1 reads as though the third belonged to
 * something else. 52rem is the width at which the narrower of the two layouts —
 * the one with the rail beside it, from 76rem — still leaves each step about
 * 226px, which is the reference's 245 near enough.
 */
.lc-chksteps {
	display: grid;
	gap: 1.1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lc-chkstep;
}

@media (min-width: 52rem) {
	.lc-chksteps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lc-chkstep {
	display: grid;
	gap: 0.2rem 0.7rem;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	padding: 0.9rem 1rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
	counter-increment: lc-chkstep;
}

/*
 * The numeral is a CSS counter and a filled disc, which is what the reference
 * draws — `--lc-invert-bg` carrying `--lc-invert-fg`, the pair that means "stand
 * away from the page" and which under the pin is deep navy at 17:1.
 *
 * The semantic pair and not `--lc-ink` / `#ffffff`, even though the page is
 * pinned and the two resolve to the same thing today: a literal would be a
 * second decision about what "inverted" means sitting one class away from the
 * block that already decides it. That is `.lc-railcard__head`'s argument
 * verbatim.
 *
 * `::before` and not markup, for the reason `.lc-railstep::before`,
 * `.lc-check__num` and `.lc-rep__cardhead::before` all give: a number inside a
 * heading becomes part of that heading's accessible name, and a number handed in
 * as data is one that can disagree with the step it is printed on. The standing
 * rule on this site is that a number may be generated and a sentence may not.
 */
.lc-chkstep::before {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--lc-invert-bg);
	color: var(--lc-invert-fg);
	font-size: var(--lc-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	grid-area: 1 / 1 / 3 / 2;
	content: counter(lc-chkstep);
}

.lc-chkstep__title {
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	font-weight: 700;
	grid-column: 2;
}

.lc-chkstep__detail {
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	line-height: 1.45;
	grid-column: 2;
}

/* ==========================================================================
   7. What a result can mean
   ========================================================================== */

.lc-chkmean__list {
	display: grid;
	gap: 0.85rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * One card per outcome, each tinted with the register's own status colours so
 * the tint under an explanation is the same tint as the badge inside it. The
 * left rule is what carries the card at a glance, and it is a **border and not a
 * background stripe**: a print-out without background graphics keeps a border and
 * loses a fill, and this is the block that tells somebody reading on paper which
 * of the three they are looking at.
 */
.lc-chkcase {
	padding: 1rem 1.15rem;
	border: 1px solid var(--lc-rule);
	border-inline-start: 4px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

/*
 * `--lc-danger` at 6.12:1 on its own tint, and **not `--lc-accent`**, which is
 * 2.83:1 there and fails the 3:1 WCAG 1.4.11 asks of a mark. That is the trap
 * `docs/theme-design.md` records under "measure a token against every surface it
 * lands on": the mark gold clears 3:1 on paper and on the band, and a tint
 * darkens the surface under it.
 */
.lc-chkcase--alert {
	border-inline-start-color: var(--lc-danger);
	background: var(--lc-st-evidenced-bg);
}

.lc-chkcase--review {
	border-inline-start-color: var(--lc-accent-text);
	background: var(--lc-st-review-bg);
}

/*
 * The third card **keeps the base `--lc-band` fill**, and that is a decision
 * rather than an omission. Paper here would be white on the white panel these
 * cards sit in — a 1:1 step carried by a 1px border alone, which is the shape
 * section 2b's floor exists to reject. The light gray is 1.081:1 against the
 * panel and its border makes the join, which is the same arrangement
 * `.lc-chkstep` uses two sections up.
 *
 * Its left rule is `--lc-fg-soft`, 5.31:1 on that fill, and deliberately **not**
 * a status colour: there is no status here, which is the whole content of the
 * card. `--lc-rule-firm` — the base value, kept as the fallback for a fourth
 * card nobody has written yet — composites to 1.82:1 on this fill and would be a
 * 4px stripe nobody can see beside two that are doing real work.
 */
.lc-chkcase--none {
	border-inline-start-color: var(--lc-fg-soft);
}

.lc-chkcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.lc-chkcase__title {
	margin: 0;
	font-size: var(--lc-t-md);
	font-weight: 700;
	letter-spacing: -0.008em;
}

/*
 * The glyph takes the title's colour, so the two read as one mark. Each title is
 * the ink half of the same status pair its card is tinted with — 7.45:1 for the
 * alert, 5.13:1 for the review — and the third is `--lc-fg` at 17:1, because a
 * card with no status has no status ink either.
 */
.lc-chkcase__glyph {
	flex: 0 0 auto;
}

.lc-chkcase--alert .lc-chkcase__title,
.lc-chkcase--alert .lc-chkcase__glyph {
	color: var(--lc-st-evidenced-fg);
}

.lc-chkcase--review .lc-chkcase__title,
.lc-chkcase--review .lc-chkcase__glyph {
	color: var(--lc-st-review-fg);
}

.lc-chkcase--none .lc-chkcase__title,
.lc-chkcase--none .lc-chkcase__glyph {
	color: var(--lc-fg);
}

/*
 * The badges are pushed to the far end of the head row rather than laid out in a
 * second column, and they wrap under the title on a narrow card instead of
 * squeezing it. `margin-inline-start: auto` on a wrapping flex row does both
 * from one declaration.
 */
.lc-chkcase__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-inline-start: auto;
}

/*
 * `--lc-fg` and not `--lc-fg-soft`, which is the call the report page's privacy
 * note made and for the same reason. Slate is 5.74:1 on paper, 5.15:1 on the
 * review tint and **4.94:1 on the evidenced tint** — legal, and a margin that
 * thin on the three sentences telling a reader what their result means is not
 * worth taking. Deep navy is 14.65:1 on the tightest of the three.
 */
.lc-chkcase__text {
	margin: 0.55rem 0 0;
	max-width: var(--lc-measure);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

/*
 * The action sits under the sentence rather than opposite the badge, which is
 * where the reference draws it.
 *
 * A right-hand column would have to be `auto`, and these three labels are the
 * ones a translation moves most: "Send us what you have" is "Schicken Sie uns,
 * was Sie haben", half again as long, and an `auto` track sized by the longest
 * of three German labels takes the width out of the sentence beside it. Under
 * the text the button is the same size in both languages and the card simply
 * gets taller.
 */
.lc-chkcase__action {
	margin: 0.85rem 0 0;
}

/*
 * **Size only.** `.lc-button--ghost`'s own colours are untouched, including its
 * `--lc-rule-firm` edge — which composites to 1.83:1 on paper and is the site's
 * standing treatment on five other pages, not something introduced here. Do not
 * "fix" it in this file: it is one declaration in `style.css` and changing it
 * from a page sheet would leave the same control looking different on this page
 * than on the five that already draw it.
 *
 * 2.75rem, down from the page's 52px default, because three full-height buttons
 * in a column of three cards make the section read as a stack of controls rather
 * than as three explanations. 44px is the floor WCAG 2.5.8 asks of a target and
 * this is exactly it — measured, because `min-height` alone does not settle a
 * target whose padding could push its line box past it.
 */
.lc-chkcase__action .lc-button {
	min-height: 2.75rem;
	padding: 0.65rem 1.1rem;
	font-size: var(--lc-t-ui);
}

/* ==========================================================================
   8. The rail
   ========================================================================== */

/*
 * The one modifier this page adds to `.lc-railcard`, and it is a *fill* rather
 * than a re-point: the card's own head bar stays `--lc-invert-bg` like the other
 * two, and only the body takes the caution tint. A rail card whose head changed
 * colour as well would read as a different component.
 *
 * `--lc-st-review-bg` and not a fresh amber: it is the register's own "not
 * settled" tint, which is exactly what this card is about.
 *
 * **It lives here and not in section 15b of `style.css`, and it moves the moment
 * a second page wants it.** That is the sequence `.lc-trustbar`, `.lc-railcard`
 * and `.lc-railcard__lookup` each followed — written in the first page's sheet,
 * moved beside the component when a second caller appeared — and the reason is
 * in that section's own header: a rule reachable from one template is a rule the
 * second template silently does without. So if you are here because a second
 * page needs a caution rail card, **move these two rules first**.
 */
.lc-railcard--caution .lc-railcard__body {
	background: var(--lc-st-review-bg);
}

/*
 * `--lc-fg` on that tint at 15.28:1, for the reason `.lc-chkcase__text` gives:
 * `.lc-railcard__note` is `--lc-fg-soft` in `style.css`, which is right on the
 * white body every other caller gives it and thin on a tint.
 */
.lc-railcard--caution .lc-railcard__note {
	color: var(--lc-fg);
}

/* ==========================================================================
   9. The closing band
   ========================================================================== */

.lc-chkcta {
	padding-block: clamp(2rem, 4.5vw, 3rem);
	background: var(--lc-ink);
}

.lc-chkcta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.lc-chkcta__body {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

/* The shield marks *advice*, which is the placement rule `LC_Icons` documents
   and the opposite end of it from the triangle on the bar above. `--lc-accent`
   is the brand gold on this band at 6.6:1, well over the 3:1 a mark needs. */
.lc-chkcta__glyph {
	flex: 0 0 auto;
	color: var(--lc-accent);
}

.lc-chkcta__title {
	margin: 0;
	color: var(--lc-fg);
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: -0.012em;
}

.lc-chkcta__text {
	max-width: 46ch;
	margin: 0.35rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.5;
}

.lc-chkcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* ==========================================================================
   10. Print
   ========================================================================== */

/*
 * A printed check is the answer and the advice.
 *
 * **This block deliberately does almost nothing about colour, because
 * `style.css`'s own print block already does it.** That block names
 * `.lc-onimage` and re-points every token on it to black-on-white with a
 * hairline edge — the hero and the closing band both carry that class, so both
 * are un-inverted before this file is consulted. The first version of this rule
 * set `color: #000 !important` on the hero and three of its children, which was
 * the same job done again and done worse: the global keeps three greys
 * (`#000000`, `#222222`, `#444444`) and a flat black flattens the lede and the
 * example line into the headline. Duplicating a rule that already works is how
 * the two copies end up disagreeing.
 *
 * So what is left is only what the global cannot know about: this page's own
 * plate, its own band fills, and where its cards may break.
 *
 * The fills are dropped rather than kept because a print dialog omits
 * backgrounds unless the reader ticks "Background graphics" — every card here
 * also declares a border, and a border always prints, which is why
 * `.lc-chkcase`'s status colour is a 4px `border-inline-start` and not a stripe.
 *
 * **The action links stay.** `report.css` hides its *in-page* step nav, whose
 * three anchors are useful only to somebody who can click, and leaves
 * `.lc-railcard__action` alone — these are external links in the same component,
 * so hiding them here would make one shared class behave differently on one
 * page's paper output for no reason anybody could find later.
 */
@media print {
	.lc-chkhero__bg,
	.lc-chkcta {
		display: none;
	}

	.lc-chkhero,
	.lc-chkmain {
		padding-block: 0.5rem;
		background: none !important;
	}

	/* Belt: below 76rem these are one column already, and a 210mm page is under
	   that — but a print stylesheet that depends on a screen media query holding
	   is one nobody will think to re-check. */
	.lc-chkmain__grid,
	.lc-chksteps {
		display: block;
	}

	.lc-chkstep,
	.lc-chkcase,
	.lc-chkresults,
	.lc-chkhow,
	.lc-chkmean,
	.lc-railcard {
		margin-bottom: 0.4rem;
		background: none !important;
		break-inside: avoid;
	}
}