/**
 * Homepage.
 *
 * Five bands, alternating deep navy / paper / light gray, each one separated
 * from the last by a declared boundary rather than by its fill alone. That is
 * not a stylistic preference: **#f5f6f8 against #ffffff is 1.08:1**, which is a
 * difference a good number of panels do not resolve, so a band that relied on
 * its own colour to say "new section" would be saying nothing — the exact
 * failure the dark scheme shipped for months at 1.005:1. The fill sets the
 * mood; the hairline does the work. Section 2b of
 * `tools/test-theme-contrast.php` asserts both halves.
 *
 * @package LieferantenCheck
 */

/* ==========================================================================
   1. Bands
   ========================================================================== */

/*
 * Every band declares its own top boundary, and the exceptions are explicit
 * rather than emergent.
 *
 * This used to be inverted — a rule on `.lc-sec`, no rule on `.lc-sec--band`,
 * and a sibling selector putting one back — which meant the *default* for a new
 * band was invisible and the correct case was the special case. Now the default
 * is a rule and the two bands that must not have one say so by name: the band
 * under the hero, and any inverted band. Both are exempt for the same reason —
 * the surface either side of the join is deep navy against paper, which is 17:1,
 * and a hairline drawn across a 17:1 step is only visible as a mistake.
 *
 * The hero used to carry a 3px gold rule along its bottom edge and this comment
 * used to cite it as what made the band below exempt. It is gone at 1.5.1: the
 * design reference has the navy meeting the section under it directly, measured
 * off the reference itself — the last row of hero is #06182d at y=725 and the
 * first row of the section below is #fdfdfd at y=727, with nothing between them.
 * The exemption did not depend on the gold and does not change; only the
 * justification is now the surface step alone, which is what it always really
 * was.
 */
.lc-sec {
	padding-block: var(--lc-band-y);
	border-top: 1px solid var(--lc-rule);
}

.lc-sec--band {
	background: var(--lc-band);
}

.lc-hero + .lc-sec,
.lc-sec--invert {
	border-top: 0;
}

/*
 * …and the hero's exemption is a *light scheme* fact, which is the half that
 * removing the gold rule nearly shipped as a bug.
 *
 * On paper the hero is `--lc-ink` and the band under it is white: 17:1, and a
 * hairline drawn across that step is only visible as a mistake. On the dark
 * scheme the band under it is `--lc-dark` — measured on the rendered page,
 * #111d2a meeting #091525 at **1.076:1**. That is the same order as the 1.08:1
 * this file's header calls a fill that "cannot mark a section join on its own",
 * and it is how the dark scheme once ran for months with no visible bands at
 * all. The 3px gold used to be what stopped it, in both schemes, whether or not
 * either needed it.
 *
 * So the rule comes back exactly where it is load-bearing and nowhere else. The
 * light scheme keeps the reference's clean navy-to-paper join; the dark scheme
 * gets the same hairline every other band on the site already declares.
 */
@media (prefers-color-scheme: dark) {
	.lc-hero + .lc-sec {
		border-top: 1px solid var(--lc-rule);
	}
}

.lc-sec--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

/*
 * Re-points the semantic tokens rather than restyling each element, in the
 * idiom `.lc-onimage` documents in style.css. Everything inside — the heading,
 * the text, the eyebrow, the numerals — already reads from these, so the band
 * inverts in one place and stays correct for anything added to it later.
 *
 * The golds all move to the brand value. #af882c is 3.0:1 over this navy and
 * would fail as text; #c89b32 is 6.64:1.
 */
.lc-sec--invert {
	--lc-fg:          #ffffff;
	--lc-fg-soft:     rgba(255, 255, 255, 0.86);
	--lc-fg-quiet:    rgba(255, 255, 255, 0.74);
	--lc-bg:          var(--lc-ink);
	--lc-accent:       var(--lc-caution);
	--lc-accent-text:  var(--lc-caution);
	--lc-accent-solid: var(--lc-caution);
	--lc-rule:        rgba(255, 255, 255, 0.2);
	--lc-rule-firm:   rgba(255, 255, 255, 0.42);

	background: var(--lc-ink);
	color: var(--lc-fg-soft);
}

/*
 * **`.lc-onpaper` used to be declared here and is `.lc-onpaper` in
 * `style.css` since 1.7.0.**
 *
 * It was never a homepage rule — it re-points twenty-four tokens on whatever
 * element carries it and knows nothing about `.lc-sec` — and it lived here only
 * because its first two callers were the bands below. The checklist page is the
 * third caller and this sheet is not loaded there, so the block moved to sit
 * beside `.lc-onimage`, which is the same technique with the tokens the other
 * way up and has always been in `style.css`. The name went with it for the same
 * reason: a `--modifier` promising a base class it does not use is a promise
 * nobody can keep on `<main class="lc-guide lc-onpaper">`.
 *
 * The whole argument for pinning, and for why it is a token re-point rather
 * than a `background` declaration, moved with the block. What is left here is
 * the part that is genuinely about this page: the join under the hero.
 */

/*
 * …and the join above it stops being a scheme question.
 *
 * `.lc-hero + .lc-sec` is exempt from the band boundary because navy meeting
 * paper is 17:1 and a hairline across that step only reads as a mistake. Until
 * now that was a *light scheme* fact — on the dark scheme the band under the
 * hero was `--lc-dark` against the hero's `--lc-ink`, 1.076:1, so the dark block
 * put the rule back by name.
 *
 * With the band pinned to paper the join is 17:1 in both schemes, so the reason
 * for the dark-scheme rule is gone and drawing it anyway would put a visible
 * hairline across the one join on the page that does not need one. It comes back
 * the moment the band under the hero is *not* paper, which is what the selector
 * says.
 *
 * Doubled class on purpose. `.lc-hero + .lc-onpaper` is (0,2,0), exactly what
 * the rule above it scores, so the two would tie and be settled by source order
 * — which works today and breaks silently the first time either block is moved.
 * `.lc-sec.lc-onpaper` takes it to (0,3,0) and the outcome stops depending on
 * where in the file this sits.
 */
@media (prefers-color-scheme: dark) {
	.lc-hero + .lc-sec.lc-onpaper {
		border-top: 0;
	}
}

/*
 * **`.lc-sec--invert.has-image` used to live here and is gone at 1.5.8.**
 *
 * It composited a photograph under a flat 90% navy wash, and the warning-signs
 * band was its only caller — the CTA band that shared it had already stopped
 * existing, which is why `--lc-cta-image` was renamed to `--lc-sec-image` in the
 * first place. That band is now `.lc-onpaper` and carries no photograph, so
 * both the rule and the custom property have no user left anywhere in the theme.
 *
 * Deleted rather than kept for the next band that might want it. A rule with no
 * caller cannot be wrong in any way anybody notices, and this one carried a
 * measured contrast argument — "over a blown-out white region the ink
 * composites to rgb(41, 52, 63)" — about six paragraphs that are no longer
 * printed on it. Keeping the arithmetic and losing the text it was measured for
 * is how a comment starts lying. The one gradient the homepage still has is the
 * hero plate's left-edge scrim, and its argument lives beside it.
 */

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

/*
 * Two numbers the hero's layout is built out of, declared here because more
 * than one element needs each of them and a second copy is how they drift.
 *
 * `--lc-hero-gap` is the grid gap. Above 62rem it is also the distance between
 * the text column and the photographic plate, because the plate places its own
 * left edge from it.
 *
 * `--lc-hero-split` is the text column's share of the grid's free space, and
 * the *only* number the grid and the plate share. It is declared on `.lc-hero`
 * rather than on `.lc-hero--image` so the grid rule below can never resolve it
 * to nothing: an unresolved `var()` is invalid at computed-value time, which
 * would drop the whole `grid-template-columns` declaration rather than fall
 * back to the single-column rule above it.
 */
/*
 * Both numbers moved at 1.5.1, and they were read off the design reference
 * rather than chosen.
 *
 * The reference gives the text column 811px of a 1518px window and starts the
 * plate at 869, with nothing between them — the search field's right edge and
 * the photograph's left edge are the same line. At 6/11 and a 4rem join this
 * came out at 733 and 852: the plate was within 17px of where it belongs and the
 * column was 78px short, because the join is 64px of that 78 and the reference
 * does not spend it.
 *
 * It is not spent to zero here. The plate's own scrim already opens on flat ink
 * for its first 3rem, so a literal `gap: 0` would still *look* like a 48px
 * gutter — and it would mean the two columns of a grid touch, which is a trap
 * for whatever gets put in column 2 later. 2.5rem plus a 4/7 split puts the
 * column at 782 and the plate's edge at 877, against the reference's 811 and
 * 869. `calc(4 / 7)` against `1fr` is a 4fr/3fr grid, the way `calc(6 / 11)`
 * was 6fr/5fr; it is written as a fraction rather than as `4fr` because the
 * plate has to read the same number to place itself, and a `fr` is not a value
 * anything outside the grid can see.
 */
.lc-hero {
	--lc-hero-gap: 2.5rem;
	--lc-hero-split: calc(4 / 7);

	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
}

/*
 * The width of the hero's content stack — the search field, the statistics row,
 * the credibility line, and the results panel on the one configuration where the
 * lookup answers on the front page.
 *
 * One token because it was four copies of `40rem`, and four copies of a number
 * that have to move together are the drift this file keeps documenting
 * elsewhere. It is declared on `.lc-home` rather than on `.lc-hero` because the
 * results panel is a sibling of the hero, not a descendant of it.
 *
 * Above 62rem this never binds: column 1 of the grid is narrower than 48rem at
 * every window width, so the *column* is what sizes these and they fill it, which
 * is what the design reference shows — the field, the three cards and the plate's
 * left edge all share one right-hand edge. The cap is for the single-column hero
 * below the split, where the shell is the whole window and a search field
 * stretched across 1400px would be the widest text input on the site.
 */
.lc-home {
	--lc-hero-col: 48rem;
}

/* ---- Hero over a photograph ------------------------------------------- */

/* No bottom rule. The navy meets the band below it directly — see the note on
   the band exemptions at the head of this file for why that is a boundary and
   not the absence of one. */
.lc-hero--image {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
	background: var(--lc-ink);
}

.lc-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * Grayscale and heavily darkened before the overlay ever runs.
 *
 * A flat wash alone is not enough: a photograph's specular highlights survive
 * it. Measured on the rendered page, an 0.80 overlay over the bright metal in
 * this image still left a backdrop of rgb(103, 109, 116) — the white headline
 * held at 5.2:1 but the gold eyebrow fell below AA.
 *
 * Clamping the source with `brightness()` caps what any highlight can reach, so
 * the floor no longer depends on which photograph is used. It also keeps more
 * of the texture visible than simply thickening the wash would, because the
 * darkening is uniform rather than a veil over the whole frame.
 */
.lc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	filter: grayscale(1) brightness(0.42) contrast(1.06);
}

/*
 * The flat wash on top of the already-darkened image. Together the two put a
 * hard ceiling on backdrop brightness: the image cannot exceed 42% luminance,
 * and this then takes 86% of what remains — leaving rgb(30, 40, 51) at the very
 * worst, where white is 14.4:1 and the gold eyebrow 5.6:1.
 *
 * Only below 62rem does anything read on top of this. Above it the text moves
 * onto flat ink and this element becomes the plate's edge treatment instead;
 * see the block under the breakpoint.
 *
 * Plain `rgba()` rather than `color-mix()`: if the declaration were ever
 * dropped by an older browser, the text would sit on the bare photograph.
 */
.lc-hero__bg::after {
	position: absolute;
	inset: 0;
	background: rgba(17, 29, 42, 0.86);
	content: "";
}

/*
 * The animated node graph, between the photograph and the wash.
 *
 * No `z-index` anywhere, and none may be added: the layering is doing real work
 * and it is done by paint order. The `<img>` is in flow, so it paints first; this
 * canvas is positioned, so it paints over the image; `.lc-hero__bg::after` is
 * positioned *and later in tree order*, so it paints over both. Give any of the
 * three a stacking index and the wash can end up under the thing it exists to
 * darken — which is the contrast argument documented above, undone. The harness
 * asserts there is no `z-index` anywhere in this file.
 *
 * `pointer-events: none` because there is nothing to click and the search field
 * is the first thing a visitor reaches for on this band.
 */
.lc-hero__fx {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* The script declines to run under a reduced-motion preference and removes the
   element. This is the same answer stated in CSS, for the window between the
   canvas being parsed and the module getting to it. */
@media (prefers-reduced-motion: reduce) {
	.lc-hero__fx {
		display: none;
	}
}

/* The content has to sit above the absolutely positioned backdrop. */
.lc-hero--image > .lc-shell {
	position: relative;
}

.lc-hero__grid {
	display: grid;
	gap: var(--lc-hero-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * The split.
 *
 * Below this width the hero is the photograph full-bleed, clamped to 42% and
 * covered by the flat wash, with the text over it. Everything above stands, and
 * `lc-hero3d.js` declines to run down here anyway.
 *
 * At this width the two jobs separate. The text moves onto flat ink and the
 * photograph becomes a plate down the right with the node graph over it — which
 * is the only place on this band where the animation is not being taken back by
 * a 86% wash.
 *
 * The contrast argument stops being a *measurement* here and becomes
 * arithmetic. Nothing sits over the photograph any more, so the numbers come
 * from tokens alone and cannot move when the image is changed:
 *
 *   #ffffff                on #111d2a = 17.0:1
 *   rgba(255,255,255,0.86) on #111d2a = 12.8:1
 *   #c89b32                on #111d2a =  6.6:1
 *
 * `tools/test-theme-contrast.php` asserts all three with no browser involved.
 *
 * 62rem rather than a round pixel figure, because 62rem is the width
 * `lc-hero3d.js` gates on. The two once disagreed by eight pixels and there was
 * a window where the canvas ran inside a single-column hero.
 */
@media (min-width: 62rem) {
	.lc-hero--image {
		padding-block: clamp(3rem, 5.5vw, 4.5rem);
	}

	/*
	 * The plate begins where column 2 begins, and it is *derived* from the
	 * grid rather than checked against it.
	 *
	 * It used to be `width: clamp(26rem, 44%, 54rem)` — a percentage of the
	 * viewport — while the text column's right edge is a fraction of a shell
	 * capped at 72rem and centred in that same viewport. The two bases are
	 * unrelated, so the band of flat ink between them was a different width
	 * at every size: 46px at 992, 100px at 1889, 403px at 2560, 843px at
	 * 3440. The comment this replaces said the left edge had been "checked
	 * at 992, 1200, 1440, 1920 and 2560" — and it had, which is exactly why
	 * it survived: at the four narrow widths it was checked at, the drift is
	 * a few dozen pixels. It only becomes a hole on a wide monitor.
	 *
	 * Written this way the join is one grid gap at every width by
	 * construction. The terms are the shell's left rail, its gutter, column 1
	 * and the gap:
	 *
	 *   (100% - shell) / 2  +  gutter  +  col1  +  gap
	 *
	 * `100%` is the section's padding box here — `.lc-hero--image` sets no
	 * inline padding, so that is the viewport — and the grid's own `100%` is
	 * its content box, which is why column 1 is spelled out again rather than
	 * shared as a length. `--lc-hero-split` is the one number both use.
	 */
	.lc-hero__bg {
		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-hero-gap))
				* var(--lc-hero-split)
			+ var(--lc-hero-gap)
		);
	}

	/*
	 * The one real gradient on the site, and it is an edge rather than a
	 * decoration — the design reference this page was built from has the same
	 * soft dissolve where the plate meets the ink.
	 *
	 * Nothing is read on top of it above 62rem, so it touches no contrast
	 * argument. Below 62rem the wash is the flat rgba the headline was measured
	 * against, and this block does not reach it.
	 *
	 * The stops are lengths, not percentages. A fade sized at 20% of the plate
	 * is a fade that grows with the monitor: at 1889 it put 175px of near-black
	 * inside the plate and at 3440 it would have put 327px, so the photograph
	 * began further from the text the more room there was for it — read as dead
	 * space, because that is what it is. The job is the left edge alone, and an
	 * edge is a fixed distance. The last stop is bounded for the same reason:
	 * held at 100% the wash only reached its intended 28% at the plate's far
	 * edge, so how dark the photograph was depended on how wide the window was.
	 */
	.lc-hero__bg::after {
		background: linear-gradient(
			90deg,
			var(--lc-ink) 0%,
			rgba(17, 29, 42, 0.62) 3rem,
			rgba(17, 29, 42, 0.28) 18rem
		);
	}

	/* The photograph is worth looking at now. Still grayscale — the standing
	   rule about imagery — but no longer clamped to near-black, because
	   nothing is being kept legible on top of it.

	   0.58 rather than the 0.74 this shipped at, and the number came off the
	   design reference rather than off taste. Sampling its plate on a 7px grid:
	   mean relative luminance 0.030, brightest pixel 0.118 (#516278). The same
	   sample of the rendered page gave a mean of 0.040 — near enough — against a
	   brightest pixel of 0.290 (#909397). The averages agreed and the highlights
	   did not, which is exactly what a photograph of bare metal does: the
	   specular hits survive a wash the rest of the frame does not need. Nothing
	   is read on top of this, so it is not a contrast argument; it is that a
	   backdrop with a blown highlight in it competes with the headline beside
	   it, and the reference has none anywhere in the plate. */
	.lc-hero__img {
		filter: grayscale(1) brightness(0.58) contrast(1.06);
	}

	/* Column 2 is deliberately empty. It reserves the plate's width inside
	   the grid, so the text can never run under the photograph however long
	   a translation turns out to be — and the plate places itself from the
	   same `--lc-hero-split`, so the reservation cannot fall out of step with
	   the thing it reserves.

	   `calc(free * 4/7)` and `1fr` are a 4fr/3fr split to the pixel: `1fr` is
	   the free space column 1 did not take, which is 3/7 of it. Spelled this
	   way so the ratio is a token the plate can read. */
	.lc-hero__grid {
		grid-template-columns:
			calc((100% - var(--lc-hero-gap)) * var(--lc-hero-split))
			minmax(0, 1fr);
	}

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

/*
 * 22ch, not the 15ch this shipped at.
 *
 * "Check the part number before you pay." is 37 characters and the reference
 * sets it as two lines — "Check the part number" over "before you pay." At 15ch
 * it could not: 1ch is the advance of `0`, which Inter draws at 0.539em, so 15ch
 * at the 64px this heading reaches is 517px against roughly 700px of headline.
 * It broke into three, and a three-line H1 in a column that had also been
 * squeezed is what made the whole hero read as cramped.
 *
 * 22ch is 759px, which is a hair wider than column 1 ever gets — so on the split
 * layout the column is the real limit and this only governs while the hero is a
 * single full-width band. That is deliberate: it is a backstop against a very
 * wide window setting the headline in one 1400px line, not a measure.
 *
 * `text-wrap: balance` still decides where the break falls. It is not asked to
 * fit two lines and cannot be — at narrower windows `--lc-t-3xl` scales down but
 * not as fast as the column does, and three lines there is correct.
 */
.lc-hero__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--lc-t-3xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.04;
	text-wrap: balance;
}

.lc-hero__lede {
	max-width: 46ch;
	margin: 1.4rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-md);
	line-height: 1.6;
}

.lc-hero__lookup {
	max-width: var(--lc-hero-col);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

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

/*
 * The field's label is hidden here and nowhere else.
 *
 * `LC_Lookup::search_form()` renders "Check a part number, domain or e-mail
 * address" above the box, which is right on `/check/` and redundant three lines
 * under a headline that says the same thing. Hidden rather than removed: the
 * input still needs a programmatic name, and the placeholder is not one — it
 * disappears the moment anything is typed and several screen readers never
 * announce it at all.
 *
 * 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-hero__lookup .lc-lookup__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	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-hero__lookup .lc-lookup__input {
	flex: 1 1 18rem;
	min-height: 3.25rem;
	padding-block: 0.9rem;
	font-size: var(--lc-t-md);

	/*
	 * The magnifier, as a background rather than an element: the field is
	 * rendered by the plugin and a theme cannot put a sibling inside its row.
	 *
	 * Purely decorative — the (hidden) label and the placeholder both say what
	 * the box is for — so a fixed white at 55% is honest here where
	 * `currentColor` is impossible in a background image. It is fixed rather
	 * than token-driven because this band is deep navy in both colour schemes,
	 * so there is no second case to answer.
	 *
	 * `padding-inline-start` has to clear it, and the `type="search"` clear
	 * button in WebKit sits at the other end, so only the start side moves.
	 */
	padding-inline-start: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.75' cy='6.75' r='4.25'/%3E%3Cpath d='M10 10l3.5 3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 1.05rem center;
	background-size: 1.15rem 1.15rem;
}

.lc-hero__lookup .lc-lookup__submit {
	min-height: 3.25rem;
	padding-inline: 1.85rem;
	border-color: var(--lc-accent-solid);
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
	font-size: var(--lc-t-base);
}

.lc-hero__lookup .lc-lookup__submit:hover,
.lc-hero__lookup .lc-lookup__submit:focus {
	border-color: var(--lc-paper);
	background: var(--lc-paper);
	color: var(--lc-ink);
}

/* On the dark band the field needs a visible edge of its own — a translucent
   fill alone reads as part of the photograph. */
.lc-hero--image .lc-lookup__input {
	border-width: 1px;
	border-color: var(--lc-rule-firm);
}

/* 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`, never the `background` shorthand: the shorthand resets
   `background-image`, and the magnifier declared above would vanish the moment
   the field took focus — visible only to somebody watching for it. */
.lc-hero--image .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-hero__hint {
	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;
}

/* On the front page the lookup renders without results — those live on the
   page named by the `lc_results_page` option. If someone points that option at
   the front page instead, the panel needs the same width as the field. */
.lc-home .lc-results {
	max-width: var(--lc-hero-col);
	margin-top: 2rem;
}

/* ==========================================================================
   2b. Register statistics
   ========================================================================== */

/*
 * Three figures, read live out of the database.
 *
 * A site whose whole argument is "every number here is checkable" cannot afford
 * a hard-coded count that quietly goes stale, and a small honest number is
 * worth more than a vague claim — the database being small is the reason the
 * self-check block exists at all.
 *
 * `auto-fit` rather than three fixed columns: at 360px three cards would be
 * 100px each and "Published alerts" would wrap to three lines. This gives one
 * column on the narrowest phones, two in the middle and three from about 420px
 * up, with nothing to configure.
 */
.lc-stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	max-width: var(--lc-hero-col);
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

/* Measured off the reference, which draws these at 259×85 with the glyph about
   29px inside the left edge and the numeral about 40px past it: 5.25rem is 84px
   tall, and the padding and gap put the two elements where it has them. The
   three cards share the search field's right-hand edge there, which they do here
   by both taking --lc-hero-col and, above the split, by both filling column 1. */
.lc-stat {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 5.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

.lc-stat__icon {
	flex: 0 0 auto;
	color: var(--lc-accent);
}

.lc-stat__body {
	min-width: 0;
}

.lc-stat__num {
	display: block;
	color: var(--lc-fg);
	font-size: var(--lc-t-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.lc-stat__label {
	display: block;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	line-height: 1.35;
}

/*
 * The credibility line.
 *
 * Deliberately not a claim about coverage. It says how the register is kept,
 * which is checkable, rather than how complete it is, which is not — the same
 * argument the "no record" result makes and the reason the caveat beside it
 * survives.
 */
.lc-hero__trust {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: var(--lc-hero-col);
	margin: 1.25rem 0 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	letter-spacing: 0.02em;
}

.lc-hero__trust svg {
	flex: 0 0 auto;
	color: var(--lc-accent);
}

.lc-hero__caveat {
	max-width: 46ch;
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--lc-rule);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	line-height: 1.55;
}

/* ==========================================================================
   3. Section heads
   ========================================================================== */

.lc-sechead {
	max-width: var(--lc-measure);
	margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.lc-sechead__title {
	margin: 0;
	font-size: var(--lc-t-2xl);
	letter-spacing: -0.026em;
	text-wrap: balance;
}

.lc-sechead__intro {
	margin: 0.9rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-md);
	line-height: 1.6;
}

/* ==========================================================================
   4. How the scam works
   ========================================================================== */

/*
 * Three steps across the main column, with the report card beside them.
 *
 * One breakpoint for both decisions, so the card never lands under a row of
 * steps that has already gone vertical: below 62rem everything stacks, above it
 * the steps run across and the card takes the rail.
 */
.lc-scam {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/* 22.5rem is 360px. The reference puts the card at x 1113..1478 — 365 wide —
   with the three steps taking 59..1060 beside it, and at the widest shell those
   two come out at 1000 and 360 against its 1001 and 365. The rail is what
   decides both, because the steps get whatever is left. */
@media (min-width: 62rem) {
	.lc-scam {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem);
	}
}

/*
 * Three sizes the steps agree on, declared once because several rules read each:
 * the glyph box sets the icon and the connector's vertical axis, the gap sets
 * both the grid and the connector's horizontal placement, and `--lc-chev` sets
 * the connector itself.
 *
 * The gap has to be a token rather than a literal on `gap:` precisely because
 * the connector is centred in it. Written twice, a change to one is a chevron
 * that quietly stops sitting in the middle of the space it is meant to bridge.
 *
 * `lc_theme_icon()` is also passed 56 in `front-page.php`, which is the no-CSS
 * fallback rather than a second source of truth — `.lc-step__icon` below
 * overrides the attributes, so layout is decided here and here only.
 */
.lc-steps {
	--lc-step-glyph: 3.5rem;
	--lc-chev: 24px;
	--lc-step-gap: 2rem;

	display: grid;
	gap: var(--lc-step-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
	counter-reset: lc-step;
}

@media (min-width: 640px) {
	.lc-steps {
		--lc-step-gap: 1.5rem;

		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lc-step {
	position: relative;
	counter-increment: lc-step;
}

/*
 * The reference puts each step's wording *beside* its glyph, and this is the
 * width at which that becomes possible rather than merely drawable.
 *
 * It was declined twice before, correctly: at 62rem — where the three steps
 * first go side by side — the report card has taken its 22.5rem rail and each
 * step is about 173px wide. A 40px numeral plus a 56px glyph and their gaps is
 * 124 of that, leaving roughly 50px of description, which is not a column. So
 * the arrangement is not a property of the *design*, it is a property of how
 * much room the steps have, and it needs its own breakpoint rather than sharing
 * the one that makes them a row.
 *
 * Derived rather than picked. The steps get `shell − rail − grid gap`; each step
 * then needs the 124px of glyph plus a description column worth having, taken
 * here as 160px, and the two chevron gaps between them:
 *
 *   3 × (124 + 160) + 2 × 48  =  948px of steps
 *   948 + 360 (rail) + 48 (gap) = 1356px of shell content
 *   1356 + 2 × 48 (gutter)      = 1452px ≈ 90.75rem
 *
 * 91rem, then — and then measured on the rendered page rather than trusted, which
 * is the half that matters. The description column comes out at **167px at the
 * breakpoint itself and 188px from 1536 up**, where the shell caps and it stops
 * growing; the design reference's own is 185px. Below the breakpoint the step
 * keeps the stacked arrangement, which is what every width from a phone to a
 * laptop actually gets, and the switch costs no height — at 1456 the stacked
 * step is 182px tall and the beside one is 164px.
 *
 * The gap widens with the arrangement. At 1.5rem the connector has 7px of slack
 * in the space it bridges, which put its apex 3.5px from the next numeral; 2rem
 * doubles that to 7.5px and costs the description the 5px between the two
 * figures above, which it does not miss.
 */
@media (min-width: 91rem) {
	.lc-steps {
		--lc-step-gap: 2rem;
	}

	.lc-step {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	/* The head stops being a row of its own and becomes the first flex child. */
	.lc-step__head {
		margin-bottom: 0;
	}

	/* Without this the flex item refuses to shrink below its longest word and
	   the row overflows the step instead of wrapping inside it. */
	.lc-step__body {
		min-width: 0;
	}

	/* The cap is what stops the description reflowing to two lines here after
	   the whole point of the width was giving it three. */
	.lc-step__detail {
		max-width: none;
	}
}

/*
 * The connector: a chevron sitting in the gap, drawn from two borders on a
 * rotated square rather than from a glyph or an image.
 *
 * It only exists where the three steps are actually side by side. Stacked, a
 * chevron pointing right between two blocks that follow each other downward
 * would be describing a layout that is not on screen.
 *
 * The design reference draws this connector tall and thin — measured off it at
 * roughly 13×37 — and it is the thing that makes three steps read as one
 * sequence rather than three cards; at the 8px it originally shipped at it was a
 * speck most readers would take for a rendering artefact.
 *
 * A square rotated 45° with two borders draws a chevron exactly 2:1, which is
 * also the ratio of the icon pack's own `chevron-right` (a 7×14 path), so the
 * geometry agrees with the drawing rather than approximating it. `--lc-chev` is
 * the square's side: the visible mark is `side × √2` tall and half that wide, so
 * 24px gives 34×17 against the reference's 37×13.
 *
 * Both offsets are derived, never literal. `top` is the head row's own centre,
 * which is the taller of the numeral and the glyph and therefore
 * `--lc-step-glyph` — write it as a number and it drifts the next time the icon
 * or the disc grows, which is precisely what happened when the glyph went
 * 40 → 56.
 *
 * **`left` centres the visible mark, not the box, and the difference is not
 * cosmetic.** Rotating a square moves the drawn shape off its own centre: the
 * two borders form a "›" whose apex sits `side × √2 / 2` to the right of the
 * element's midpoint and whose back edge sits *on* that midpoint. So a box
 * centred in the gap draws a chevron sitting half its width to the right of the
 * gap — at 14px that was a 5px lean nobody could see, and at 24px the apex
 * reached 5px past the gap and printed on top of the next step's numeral. The
 * third term is that half-width (`√2 / 4 ≈ 0.354`), which puts the *ink* in the
 * middle of the gap and leaves the disc clear. Measured after the change: the
 * apex lands 3.5px short of the disc at the 1.5rem gap and 7.5px short at 2rem.
 */
@media (min-width: 640px) {
	.lc-step + .lc-step::before {
		position: absolute;
		top: calc(var(--lc-step-glyph) / 2);
		left: calc(var(--lc-step-gap) / -2 - var(--lc-chev) / 2 - var(--lc-chev) * 0.354);
		width: var(--lc-chev);
		height: var(--lc-chev);
		border-top: 2px solid var(--lc-rule-firm);
		border-right: 2px solid var(--lc-rule-firm);
		transform: translateY(-50%) rotate(45deg);
		content: "";
	}
}

/*
 * Once the wording sits beside the glyph the step is one row, so the connector
 * belongs on the row's axis rather than on the head's — which is also where the
 * reference draws it.
 */
@media (min-width: 91rem) {
	.lc-step + .lc-step::before {
		top: 50%;
	}
}

.lc-step__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/*
 * The numeral is not a heading. "01" in the heading outline would leave a
 * screen reader announcing a level-3 heading called "01", so the numeral is
 * drawn by a counter on a decorative element and the step title carries the
 * level.
 */
/* 2.5rem is 40px, which is what the reference draws the disc at — measured off
   it directly: the dark run at y=845 is x 60..95 and the disc's vertical extent
   at x=78 runs 835..874. It is also the 44px minimum touch target's near
   neighbour, which matters only in that nothing here is clickable and so 40 is
   allowed to be the visual answer rather than the ergonomic one. */
.lc-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--lc-ink);
	color: var(--lc-paper);
	font-size: var(--lc-t-ui);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.lc-step__num::before {
	content: counter(lc-step);
}

/* A dark circle on a dark band would be invisible; on an inverted section the
   numeral swaps to paper-on-ink. */
.lc-sec--invert .lc-step__num {
	background: var(--lc-paper);
	color: var(--lc-ink);
}

/*
 * The glyph carries the step, so it takes the full foreground rather than the
 * soft token.
 *
 * The reference draws these at about 65px wide and in near-black — they are the
 * first thing the eye lands on in that band. `--lc-fg-soft` is `--lc-slate`,
 * #5e6772, which on paper is a 5.4:1 stroke: legible, but it read as a caption
 * next to a 40px navy disc rather than as the subject. Nothing is lost by
 * promoting it: these glyphs are decorative without exception — `aria-hidden`,
 * every one of them duplicating wording already on the page — so this is a
 * question of visual weight only and never of what the step says.
 */
.lc-step__icon {
	flex: 0 0 auto;
	width: var(--lc-step-glyph);
	height: var(--lc-step-glyph);
	color: var(--lc-fg);
}

/*
 * `.lc-icon__knockout` and `.lc-icon__accent` are deliberately **not** here.
 *
 * They were, and that was a latent bug: this sheet is enqueued behind
 * `is_front_page()`, so a glyph part styled from it is styled on exactly one
 * template while the glyph itself is available to every one of them. They are in
 * `style.css` beside `.lc-mark`, which is where a glyph's own parts belong.
 */

.lc-step__title {
	margin: 0 0 0.4rem;
	font-size: var(--lc-t-md);
	letter-spacing: -0.016em;
}

.lc-step__detail {
	margin: 0;
	max-width: 42ch;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
	line-height: 1.6;
}

/* ---- The report card ---------------------------------------------------- */

/*
 * The one solid red surface on the site, and it earns it: this is the only
 * place a visitor is asked to *do* something that costs them time rather than
 * protects them from a loss.
 *
 * The two brand constants are named directly rather than through `--lc-danger`
 * and `--lc-paper`'s semantic aliases, because this card must look identical in
 * both colour schemes — `--lc-danger` moves to a light red on a dark page, which
 * is right for text and wrong for a fill. White on #a12e32 is 7.11:1 in every
 * scheme.
 */
.lc-report-card {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--lc-radius);
	background: var(--lc-alarm);
	color: var(--lc-paper);
}

.lc-report-card__icon {
	color: var(--lc-paper);
}

.lc-report-card__title {
	margin: 1rem 0 0;
	color: var(--lc-paper);
	font-size: var(--lc-t-lg);
	letter-spacing: -0.018em;
}

.lc-report-card__text {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.88); /* 5.86:1 on the fill */
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

.lc-report-card__action {
	margin: 1.5rem 0 0;
}

/*
 * Full width, label left, chevron right.
 *
 * Centred it wrapped badly: "Report suspected fraud" is four words in a 256px
 * button, and with `justify-content: center` the two lines centred themselves
 * around a chevron that had been pushed to the end of the second one. Left-
 * aligning the text and pushing the glyph to the far edge is also what the
 * design reference shows.
 */
.lc-report-card .lc-button {
	width: 100%;
	justify-content: space-between;
	text-align: left;
}

/* ==========================================================================
   5. Warning signs
   ========================================================================== */

/*
 * Six one-line signs beside a heading that sends the reader to the six full
 * ones, on paper.
 *
 * **This band used to be the plugin's checklist over a photograph**, and every
 * part of the change is downstream of dropping the picture. `LC_Render::red_flags()`
 * still emits its `<ol>` of six titles-and-paragraphs and still renders it on an
 * alert, on a part-number archive and under a lookup that found nothing; the
 * homepage stopped calling it, so the `.lc-signs .lc-flag` rules that turned it
 * into cards here are gone with it. Nothing else on the site changed appearance
 * — that scoping is exactly what it was for.
 *
 * `/warning-signs/` was a fourth caller when this was written and stopped being
 * one at 1.7.0, where it became a designed template that does not call
 * `the_content()`. That page's own rows are `.lc-check` in
 * `assets/css/warning-signs.css`; nothing in this file reaches them.
 *
 * The band takes `.lc-onpaper`, which is the second user of a modifier
 * written for "How the scam works". The reference draws both on paper, and the
 * argument for pinning is the same one: this surface is part of the identity
 * rather than part of the scheme, and a dark-mode reader was getting a fourth
 * dark band between two dark ones where the reference shows the page's one
 * light field. See the token block in section 1 for why that is a re-point of
 * twenty-four tokens and not a `background` declaration.
 */

/*
 * …and the fill is `--lc-band`, not the paper the modifier defaults to, which
 * is the one decision here that had to be made rather than inherited.
 *
 * The reference draws a light field with white cards on it, and that
 * relationship is what makes six compact rows read as six objects: at 1.09:1
 * the step is a mood rather than a boundary, so each card also declares a
 * `--lc-rule` edge and the two together do the job. Painting the field white
 * instead would leave the cards distinguishable by their hairline alone.
 *
 * The cost is that the band above this one — the published-alerts strip — is
 * also `--lc-band` on the light scheme, so two consecutive bands share a fill.
 * That is why the top rule here is `--lc-rule-firm` and not the `--lc-rule`
 * every other band declares: composited on this field the firm rule is #babdc3
 * at 1.55:1 against it, against 1.20:1 for the ordinary one. A hairline is
 * allowed to be the whole boundary — section 2b's floor exists to say so — but
 * only if it is genuinely visible, and this is the one join on the page where
 * the fill either side of it contributes nothing.
 *
 * On the dark scheme the band above is #16263a and this one is #f5f6f8, so the
 * join is a 15:1 step and the rule is decoration. Declared once for both,
 * because a `@media` here would mean the light branch depended on the media
 * query having been written correctly — the same reasoning `.lc-onpaper`
 * itself gives.
 */
.lc-signs {
	border-top-color: var(--lc-rule-firm);
	background: var(--lc-band);
}

/*
 * The intro left, the six signs right, and both breakpoints are about how much
 * room a *description column* has — the argument `.lc-steps` makes below for its
 * own 91rem, one level down.
 *
 * A card spends 131px before any wording: 1.25rem of padding either side, its
 * 1px edge, the 3.5rem glyph box, the 1rem gap after it, and the 1rem padding
 * and 1px rule the body starts with. Everything left is the description, and
 * "The company details cannot be verified in an official register." is 62
 * characters — about 428px at the 15px these rows are set in — so the line count
 * is that remainder and nothing else.
 *
 * Measured across the iframe sweep rather than derived, because the two-column
 * split takes its share of a shell that is itself clamped and the chain is not
 * worth doing on paper:
 *
 *   320  one card across, 151px of description, four lines. A phone.
 *   832  two across (52rem): card 361, description 230, two lines.
 *  1216  the split (76rem):  card 319, description 188, three lines.
 *  1440  card 385, description 271, back to two.
 *  1504  card 409 of a 1504 shell — 27.1%, against the reference's 27.4%.
 *
 * **1216 is where the split is worth taking even though it costs a line.** The
 * band is 928px tall stacked at 1180 and 702px split at 1216, because the intro
 * stops being a full-width block above the panel — so the arrangement the
 * reference draws arrives, and arrives shorter, at the price of the two longest
 * signs wrapping once more between there and about 1400. Raising it to the
 * ~82rem a two-line description would need hands a 1280px laptop the stacked
 * layout to buy back one line of wrap, which is the wrong trade.
 */
.lc-signs__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * `align-items: center` only once there are two columns, and it is read off the
 * reference rather than picked: there the intro's eyebrow sits 73px below the
 * first card's top edge, and centring puts it 57px below here. Below the
 * breakpoint the declaration would be inert anyway — every row of a one-column
 * grid is its own track — so the base stays `start`, which is what an intro of
 * unknown height wants if it ever ends up beside a shorter panel.
 */
@media (min-width: 76rem) {
	.lc-signs__grid {
		gap: clamp(3rem, 4vw, 4.5rem);
		grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
		align-items: center;
	}
}

/*
 * `.lc-sechead` already carries the bottom margin, so the button only has to
 * stop adding its own. The module is reused whole rather than restyled — the
 * eyebrow, the 2xl heading and the intro are the same three things they are on
 * the other bands, and `max-width: var(--lc-measure)` inside a column narrower
 * than the measure is simply inert.
 */
.lc-signs__action {
	margin: 0;
}

.lc-signs__panel {
	min-width: 0;
}

.lc-signs__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
	counter-reset: lc-sign;
}

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

/*
 * `align-items: center` and not `start`: the glyph box is 3.5rem and a row is
 * two lines of 15px plus its title, so the two are within a few pixels of each
 * other and centring is what the reference shows. A row whose description runs
 * to three lines at a narrow width grows below the box rather than pushing it
 * off the top.
 */
.lc-sign {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	counter-increment: lc-sign;
}

/*
 * `--lc-accent` for both the edge and the ink, which on paper is #af882c at
 * 3.29:1 — over the 3:1 WCAG 1.4.11 asks of a boundary and of a mark, and the
 * reason that token exists at all. The reference samples its gold at the brand
 * #c89b32, which is **2.56:1 on white** and under the bar for either role, so
 * this is the same hue darkened until it clears rather than a different colour.
 * Section 12 measures both against the card, not against the field the card
 * sits on.
 */
.lc-sign__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--lc-accent);
	border-radius: var(--lc-radius);
	color: var(--lc-accent);
}

/*
 * `lc_theme_icon()` is passed 28 in `front-page.php`, which is the no-CSS
 * fallback rather than a second source of truth — the same arrangement
 * `.lc-step__icon` documents.
 */
.lc-sign__glyph {
	width: 1.75rem;
	height: 1.75rem;
}

/*
 * The rule between the glyph and the wording, and `min-width: 0` beside it
 * because a flex item's default `min-width: auto` refuses to shrink below its
 * longest word — which is how a domain or a part code in this column would push
 * the card past its track instead of wrapping inside it.
 */
.lc-sign__body {
	min-width: 0;
	padding-left: 1rem;
	border-left: 1px solid var(--lc-rule);
}

.lc-sign__head {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
}

/*
 * The ordinal is generated, never written into the markup: `content:
 * counter(...)` cannot get out of step with the six rows the way a hand-typed
 * "05" can, and it is what makes the numbering follow if a sign is ever added
 * or dropped. `decimal-leading-zero` is what the reference shows and what the
 * plugin's own checklist has never had, which is fine — that list is numbered
 * by a different rule in a different place.
 *
 * `--lc-fg`, matching the title rather than the accent: the number is part of
 * the same phrase, and gold here would make six ordinals the loudest thing in
 * a band whose point is the six titles.
 */
.lc-sign__num::before {
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	content: counter(lc-sign, decimal-leading-zero);
}

.lc-sign__title {
	margin: 0;
	font-size: var(--lc-t-ui);
	letter-spacing: -0.006em;
	text-wrap: balance;
}

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

/*
 * The one line on this band that is a finding rather than a description.
 *
 * The tint is `--lc-st-evidenced-bg` and the borrow is deliberate. It is the
 * evidenced *badge's* fill, and this is not a badge — but it is the one red on
 * paper this site has already measured, `.lc-onpaper` already restates it
 * (so section 13 already guards it against drift), and the alternative is a
 * ninth red literal that has to stay related to `--lc-alarm` by somebody
 * remembering. Two values that must stay related are one edit away from not
 * being, which is the argument `--lc-st-review-fg` makes for pointing at
 * `--lc-caution-text` instead of restating #7f6220.
 *
 * The ink and the edge are `--lc-danger` — #a12e32 on that tint is 6.10:1, so
 * it clears AA as text and 1.4.11 as a boundary from the same value, and it is
 * the brand's warning red rather than the badge's darker sibling. The glyph
 * takes it too, at 3:1 minimum for a mark and 6.10 in fact.
 */
.lc-signs__alarm {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--lc-danger);
	border-radius: var(--lc-radius);
	background: var(--lc-st-evidenced-bg);
	color: var(--lc-danger);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	line-height: 1.5;
}

.lc-signs__alarm-glyph {
	flex: 0 0 auto;
}

/* ==========================================================================
   6. Published alerts
   ========================================================================== */

/*
 * The register, turned on its side.
 *
 * The rest of the site lists alerts vertically — `archive.php` argues at length
 * that a record is a list and not a card grid, and that argument stands
 * everywhere it is made. The homepage is the one place it does not: this is a
 * teaser for five entries at most, sitting between a warning band and the
 * method, and a list there reads as the bottom of the page rather than as an
 * invitation into it.
 *
 * Native scroll-snap, not a carousel library. The entries stay in the DOM, in
 * source order, crawlable, with no ARIA describing a widget that is really just
 * a box that scrolls; touch and trackpad work with no script at all, and the
 * arrows are an enhancement on top rather than the only way through.
 */

.lc-slider {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/*
 * `position: relative` is load-bearing, not cosmetic — the same trap
 * `.lc-sellers__scroll` documents in the plugin. Overflow clips a descendant
 * only where the clipping element is also that descendant's containing block,
 * and each card carries an absolutely positioned `::after`. Without this the
 * caps resolve against the initial containing block, escape the strip and drag
 * `documentElement.scrollWidth` past the viewport: the page scrolls sideways
 * because of a 2px bar, and no screenshot shows it.
 *
 * `overflow-y: hidden` is explicit because a lone `overflow-x: auto` computes to
 * `auto` on both axes, and the strip would grow a vertical scrollbar of its own.
 */
.lc-slider__track {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Room for a card's focus ring, which `overflow-y: hidden` would otherwise
	   clip flat against the top and bottom edges. */
	padding-block: 3px;

	/*
	 * Thinned and re-coloured, not hidden.
	 *
	 * Windows draws a classic scrollbar rather than an overlay one, and at its
	 * default weight it is the heaviest line in a band built from hairlines.
	 * `scrollbar-width` and `scrollbar-color` are one declaration each and
	 * degrade to the default bar where they are unsupported, which is the honest
	 * fallback: the strip scrolls either way.
	 *
	 * Deliberately not `display: none` on the bar. The arrows only exist when
	 * JavaScript ran, so on a mouse with no script the scrollbar is the entire
	 * affordance saying there is more to the right.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--lc-rule-firm) transparent;
}

/* The same, for engines predating `scrollbar-width`. */
.lc-slider__track::-webkit-scrollbar {
	height: 6px;
}

.lc-slider__track::-webkit-scrollbar-track {
	background: transparent;
}

.lc-slider__track::-webkit-scrollbar-thumb {
	background: var(--lc-rule-firm);
}

.lc-slider__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-alerts {
	display: flex;
	gap: clamp(0.85rem, 1.6vw, 1.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `flex: 1 0 <basis>` is the whole responsive behaviour and both numbers matter.
 *
 * Grow 1: with two entries the cards fill the strip instead of leaving a third
 * of it blank down the right. Shrink 0: with five they refuse to squash, the row
 * overflows, and the strip becomes a slider. So the same rule produces a filled
 * row or a scroller purely from how many alerts are published, with nothing to
 * configure.
 */
.lc-alert-card {
	display: flex;
	position: relative;
	flex: 1 0 clamp(17rem, 76vw, 25rem);
	flex-direction: column;
	margin: 0;
	padding: 1.5rem 1.4rem 1.4rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	scroll-snap-align: start;
	transition: border-color var(--lc-speed) linear;
}

/*
 * The accent cap, and it is the theme's signature rather than card decoration:
 * the eyebrow's leading rule is the same mark. Drawn inside the border box, so
 * it can never widen the card.
 */
.lc-alert-card::after {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--lc-accent);
	content: "";
	transform-origin: left center;
}

/* Which card the pointer or the keyboard is on. On the base rule above, not
   here: declared on `:hover` the ease would only run on the way in and snap
   back on the way out. */
.lc-alert-card:hover,
.lc-alert-card:focus-within {
	border-color: var(--lc-accent);
}

.lc-alert-card__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-bottom: 0.85rem;
}

.lc-alert-card__domain {
	min-width: 0;
	overflow: hidden;
	color: var(--lc-fg-soft);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lc-alert-card__title {
	margin: 0;
	font-size: var(--lc-t-md);
	letter-spacing: -0.016em;
	line-height: 1.35;
}

.lc-alert-card__title a {
	color: var(--lc-fg);
	text-decoration: none;
}

.lc-alert-card__title a:hover,
.lc-alert-card__title a:focus {
	color: var(--lc-fg);
	text-decoration: underline;
	text-decoration-color: var(--lc-accent);
	text-decoration-thickness: 2px;
}

.lc-alert-card__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
	margin: 0.75rem 0 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Clamped so one fourteen-word excerpt does not set the height of every card.
 * Visual only — the full text stays in the DOM for a crawler and for a screen
 * reader, which is why this is a clamp and not a PHP substring.
 */
.lc-alert-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0.85rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.lc-alert-card__parts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.lc-alert-card__part {
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-xs);
}

/* Pushed to the foot of the card by `margin-top: auto`, so the link sits on one
   line across the strip however uneven the excerpts are. */
.lc-alert-card__more {
	margin: 1.25rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--lc-rule);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	margin-top: auto;
}

.lc-alert-card__more a {
	text-decoration: none;
	border-bottom: 2px solid var(--lc-accent);
	padding-bottom: 2px;
}

/* `[hidden]` is a UA `display: none` and any `display` here would silently
   outrank it, leaving arrows on a strip that does not scroll. */
.lc-slider__nav[hidden] {
	display: none;
}

.lc-slider__nav {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin: 1rem 0 0;
}

.lc-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: none;
	color: var(--lc-fg);
	cursor: pointer;
	transition: border-color var(--lc-speed) linear, color var(--lc-speed) linear;
}

.lc-slider__btn:hover,
.lc-slider__btn:focus-visible {
	border-color: var(--lc-accent);
	color: var(--lc-accent-text);
}

/* Disabled at an end of the strip. Kept legible rather than faded to nothing:
   a control that has vanished is a control the reader looks for. */
.lc-slider__btn[disabled] {
	border-color: var(--lc-rule);
	color: var(--lc-fg-quiet);
	cursor: default;
}

/*
 * The motion, on the strip's own axis.
 *
 * `view(inline)` and not `view()`: the cards sit side by side, so a block-axis
 * timeline would give every one of them identical progress and the stagger
 * would be nothing. Measured against the horizontal scrollport instead, each
 * card arrives as it is swiped in — and where the row does not overflow, every
 * card is already past the end of its range and simply at rest.
 *
 * This is the *only* motion on the page that changes opacity, and it is on a
 * scroll-position timeline rather than a script: there is no state in which a
 * card is hidden waiting for JavaScript, which is what the brief rules out and
 * what the retired `.lc-reveal` treatment did.
 *
 * Everything is `@media screen`, and the reason is the cap rather than the
 * animation. Drawing a rule needs it to be a box, a box draws with `background`,
 * and a print dialog omits backgrounds unless the reader ticks "Background
 * graphics" — a `border` always prints. So paged output never enters this block
 * and keeps the plain bordered card.
 *
 * The animation is not the hazard it looks like. Measured in Chrome 150: an
 * animation whose timeline is inactive resolves to its **end** state, not its
 * `from` state — a named timeline that does not exist reports
 * `playState: finished` at `opacity: 1`. Nothing in the spec obliges another
 * engine to agree, and the guard costs nothing.
 */
@media screen {
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {

			.lc-alert-card {
				animation: lc-card-in linear both;
				animation-timeline: view(inline);
				animation-range: entry 15% entry 85%;
			}

			/* Behind the card on purpose, and by a later range rather than a
			   delay: the card lands, then its cap is drawn across the top. A
			   delay is time and this timeline is distance, so `animation-delay`
			   would do nothing here. */
			.lc-alert-card::after {
				animation: lc-rule-draw linear both;
				animation-timeline: view(inline);
				animation-range: entry 40% contain 15%;
			}
		}

		@keyframes lc-card-in {
			from { opacity: 0; transform: translateY(12px); }
			to   { opacity: 1; transform: none; }
		}

		@keyframes lc-rule-draw {
			from { transform: scaleX(0); }
			to   { transform: scaleX(1); }
		}
	}
}

.lc-more {
	max-width: var(--lc-measure);
	margin: 1.5rem 0 0;
	font-size: var(--lc-t-ui);
	font-weight: 600;
}

.lc-more a {
	text-decoration: none;
	border-bottom: 2px solid var(--lc-accent);
	padding-bottom: 2px;
}

/* ==========================================================================
   7. Method
   ========================================================================== */

.lc-method {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 860px) {
	.lc-method {
		gap: 3.5rem;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.lc-method__figure {
	margin: 0;
}

/*
 * The photograph holds while the four methods scroll past it — the device
 * long-form journalism uses, not the one product pages use.
 *
 * `align-self: stretch` is load-bearing: `.lc-method` is `align-items: start`,
 * which sizes this figure to its own content, and a sticky child cannot travel
 * inside a box its own height. It needs the column to be full height first.
 *
 * `position` is not `animation-*` or `transition-*`, so the global reduce block
 * in style.css does not reach it and it needs its own answer below.
 */
@media (min-width: 860px) {
	.lc-method__figure {
		align-self: stretch;
	}

	.lc-method__figure img {
		position: sticky;
		top: calc(var(--lc-head-h) + 1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-method__figure img {
		position: static;
	}
}

.lc-method__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-radius);
	/* No identifiable people and no legible third-party branding in imagery —
	   a standing rule on this site. Desaturating also keeps the photograph from
	   competing with the gold accent, which is the only colour that carries
	   meaning here. */
	filter: grayscale(1) contrast(1.05);
}

.lc-method__list {
	margin: 0;
	border-top: 1px solid var(--lc-rule);
}

.lc-method__item {
	padding-block: 1.35rem;
	border-bottom: 1px solid var(--lc-rule);
}

/* The glyph is a third grid item spanning both rows, so the term and the
   description share one left edge beside it. `has-icon` is set by the template
   only when a glyph was actually returned — with the plugin inactive
   `lc_theme_icon()` gives back nothing and the item stays a plain block, rather
   than a grid with an empty 22px column down the left. */
.lc-method__item.has-icon {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.9rem;
}

.lc-method__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	/* Optically centred on the cap height of the term beside it. */
	margin-top: 0.35rem;
	color: var(--lc-accent);
}

.lc-method__term {
	margin: 0 0 0.35rem;
	font-size: var(--lc-t-md);
	font-weight: 700;
	letter-spacing: -0.016em;
}

.lc-method__desc {
	margin: 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
	line-height: 1.6;
}