/*
Theme Name: LieferantenCheck
Theme URI:    https://lieferantencheck.example/
Description:  Standalone theme for LieferantenCheck. Designed as a public record rather than a landing page: evidence first, hairline rules, part numbers always in monospace. Carries no page builder and loads no third-party asset of any kind. All evidence is rendered by the LieferantenCheck Core plugin, so switching theme never loses data.
Author:       HyTrade24
Version:      1.14.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lieferantencheck
Tags:         one-column, custom-menu, custom-logo, translation-ready, accessibility-ready
*/

/**
 * Styling only.
 *
 * Nothing in this theme may affect what an alert says. The plugin renders the
 * evidence; this file decides how it looks. Keeping that line clean is what
 * allows the theme to be replaced without a legal review.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/*
	 * The seven brand constants, exactly as specified. These do not change
	 * between colour schemes, and nothing else in the file may invent a colour.
	 */
	--lc-ink:        #111d2a; /* deep navy   */
	--lc-ink-deep:   #091525; /* dark navy   */
	--lc-caution:    #c89b32; /* warm gold   */
	--lc-paper:      #ffffff; /* white       */
	--lc-muted:      #f5f6f8; /* light gray  */
	--lc-slate:      #5e6772; /* slate text  */
	--lc-alarm:      #a12e32; /* warning red */

	/*
	 * Three golds, and the split is forced by arithmetic rather than taste.
	 *
	 * #c89b32 is **2.56:1 on white**. That is not merely short of the 4.5:1 a
	 * word needs — it is short of the 3:1 WCAG 1.4.11 asks of a border or a
	 * focus ring, so on paper the brand gold cannot legally be a *mark* either.
	 * It is 6.64:1 on the deep navy, which is where the identity actually lives
	 * and where it is used unmodified.
	 *
	 * So on light surfaces it splits into two siblings at the same hue (42deg)
	 * and saturation (60%), each darkened until it clears its own bar and no
	 * further. Measured, not guessed:
	 *
	 *   --lc-caution-mark  #af882c  3.29:1 on paper, 3.04:1 on the band
	 *   --lc-caution-text  #7f6220  5.72:1 on paper, 5.29:1 on the band
	 *
	 * The text token is darker than paper alone requires, and that is measured
	 * rather than cautious. It has to clear 4.5:1 on the *four* surfaces it
	 * actually lands on, and paper is the easiest of them: the caution banner
	 * prints it on a 12% tint of the mark token and the "reported" badge prints
	 * it on #e9ecf0. #8b6c23 clears paper at 4.92 and fails both of those at
	 * 4.36 and 4.15 — which is the same shape as the `.lc-banner--caution` note
	 * in `lc-components.css`: amber on an amber tint is *worse* than amber on
	 * white, not better, and checking only against paper misses it.
	 *
	 * The brand gold survives on light surfaces in exactly one role: as a
	 * *fill*, with deep navy printed on it (6.64:1). That is the primary
	 * button, and it is why `--lc-accent-solid` exists as a third role rather
	 * than everything collapsing onto the mark token.
	 *
	 * `tools/test-theme-contrast.php` section 2 asserts both directions — the
	 * text token must clear 4.5 and the mark token must *not* — so flattening
	 * these back into one value fails the suite rather than shipping.
	 */
	--lc-caution-mark: #af882c;
	--lc-caution-text: #7f6220;

	/* Semantic roles. These are what everything else references, and they are
	   the only things the dark scheme and the inverted bands redefine. */
	--lc-fg:       var(--lc-ink);
	--lc-fg-soft:  var(--lc-slate);
	/* 4.81:1 on paper and 4.68:1 on the band — the quiet token is still read,
	   so it clears AA on both surfaces rather than only on the lighter one. */
	--lc-fg-quiet: rgba(17, 29, 42, 0.62);
	--lc-bg:       var(--lc-paper);
	--lc-band:     var(--lc-muted);
	--lc-rule:      rgba(17, 29, 42, 0.13);
	--lc-rule-firm: rgba(17, 29, 42, 0.28);
	--lc-accent:       var(--lc-caution-mark);
	--lc-accent-text:  var(--lc-caution-text);
	/* A surface, never ink on a light background. See the note above. */
	--lc-accent-solid: var(--lc-caution);
	--lc-danger:   var(--lc-alarm);
	--lc-link:     #0b4f8a; /* 8.40:1 on paper, 7.77:1 on the band */
	--lc-link-hov: #083a66;
	--lc-invert-fg: var(--lc-paper);
	--lc-invert-bg: var(--lc-ink);
	--lc-field-bg: var(--lc-paper);

	/*
	 * The four evidence statuses, as ink/tint pairs.
	 *
	 * Colour is never the only carrier: every badge states its status in words
	 * beside the tint, so these need to be legible rather than loud. Each ink
	 * clears 4.5:1 against its own tint *and* against both page surfaces, so a
	 * badge stays readable if it is ever rendered without its fill.
	 *
	 *   reported   #4e5762 on #e9ecf0  6.19:1
	 *   review     #7f6220 on #f9f2e3  5.13:1
	 *   evidenced  #8f2226 on #fbeaea  7.45:1
	 *   corrected  #1b5b91 on #e8f0f8  6.18:1
	 *
	 * The review ink is `--lc-caution-text` itself rather than a fourth copy of
	 * the same hex. They were arrived at independently and landed on the same
	 * value, which is not a coincidence — both are "the warm gold, dark enough
	 * to read" — and two literals that must stay equal are one edit away from
	 * not being.
	 */
	--lc-st-reported-fg:  #4e5762;
	--lc-st-reported-bg:  #e9ecf0;
	--lc-st-review-fg:    var(--lc-caution-text);
	--lc-st-review-bg:    #f9f2e3;
	--lc-st-evidenced-fg: #8f2226;
	--lc-st-evidenced-bg: #fbeaea;
	--lc-st-corrected-fg: #1b5b91;
	--lc-st-corrected-bg: #e8f0f8;

	/* Measure. --lc-shell is the page grid, --lc-measure the reading column.
	   44rem is 704px, inside the 700-760px the design brief asks of an
	   article.

	   94rem, not the 72rem this shipped at, and the difference is the whole
	   reason the hero did not look like the design reference. Measured off that
	   reference at its own 1536px width: the masthead logo, the hero eyebrow and
	   the section headings all start 58px from the left edge, and the
	   photographic plate begins at 879 — so the text column is 53% of the window
	   and the plate 43%, with the page margin taking the remaining 4%.

	   At 72rem a 1536px window put 192px of rail on each side before the gutter
	   even started, so the text column came out at 36% and the plate at 45%: the
	   plate was in very nearly the right place and the column beside it had been
	   squeezed by 165px it never had. The visible symptoms were all downstream of
	   that one number — an H1 breaking across three lines instead of two, a
	   search field two thirds the width it is drawn at, and three statistics
	   cards at 172px each.

	   94rem is 1504px, which puts the content box at 1408 and the first character
	   64px from the edge of a 1536px window against the reference's 58. It is a
	   cap rather than a width: below about 1500px the shell is the window and the
	   gutter is the whole margin, which is the proportion the reference is drawn
	   at. Reading pages are unaffected — they take --lc-shell-read below, which is
	   derived from the measure and knows nothing about this. */
	--lc-shell:    94rem;
	--lc-measure:  44rem;
	--lc-gutter:   clamp(1.25rem, 5vw, 3rem);

	/* The grid a page made only of reading matter gets: a shell whose *content
	   box* is exactly the measure, so there is nothing left over to distribute
	   unevenly. `calc()` rather than a literal 50rem keeps it one number with the
	   two it is derived from — edit the measure or the gutter and this follows,
	   which is the whole reason the imbalance it fixes could exist at all. */
	--lc-shell-read: calc(var(--lc-measure) + var(--lc-gutter) * 2);

	/*
	 * Inter, self-hosted and inlined — see `assets/css/fonts.css` for why it is
	 * a data: URI rather than a file, and why the subset is latin only.
	 *
	 * Still no third-party request of any kind: a German site embedding a font
	 * from a CDN hands every visitor's IP to that CDN, which is the transfer
	 * this site's privacy posture rules out. The system stack behind it is not
	 * decoration — it is what renders a glyph outside the subset, and what
	 * renders everything if the stylesheet is blocked.
	 */
	--lc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--lc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
	           monospace;

	--lc-t-xs:   0.75rem;    /* 12 */
	--lc-t-sm:   0.8125rem;  /* 13 */
	--lc-t-ui:   0.9375rem;  /* 15 */
	--lc-t-base: 1.0625rem;  /* 17 — body, and the floor the brief sets */
	--lc-t-md:   1.125rem;   /* 18 */
	--lc-t-lg:   1.3125rem;  /* 21 */
	--lc-t-xl:   clamp(1.375rem, 2.4vw, 1.625rem);  /* 22 → 26 */
	--lc-t-2xl:  clamp(1.75rem, 3.6vw, 2.625rem);   /* 28 → 42 — section heads */
	--lc-t-3xl:  clamp(2.25rem, 5.2vw, 4rem);       /* 36 → 64 — the H1 */

	--lc-band-y:  clamp(3.75rem, 8vw, 6.5rem);
	--lc-radius:  4px;

	/* One duration for the whole site. The brief asks for 150-250ms and this is
	   the middle of it; anything that wants to feel different should change
	   easing, not length. */
	--lc-speed:   0.2s;
	--lc-ease:    cubic-bezier(0.2, 0.7, 0.3, 1);

	/* The sticky masthead's height, as a token because three other things have
	   to clear it: the scroll padding for in-page anchors, the mobile menu's
	   maximum height, and the sticky table of contents on an alert. */
	--lc-head-h:  5rem;
}

/*
 * The core plugin ships two `prefers-color-scheme: dark` blocks of its own, so
 * a light-only theme would leave a visitor on OS dark mode with a white page
 * full of dark-mode-coloured components. Flipping here keeps the whole page in
 * one scheme.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--lc-fg:        #e8edf3;
		--lc-fg-soft:   #b5c1ce;
		--lc-fg-quiet:  rgba(232, 237, 243, 0.66);
		--lc-bg:        var(--lc-ink-deep);
		/*
		 * The dark band is **not** the deep navy.
		 *
		 * #111d2a against #091525 is 1.08:1 — the same colour to any eye, and
		 * the exact failure the 1.4.0 note in this file records: every band on
		 * every page rendering identically to the page behind it while the
		 * markup carried perfectly good structure. #16263a is 1.20:1 against
		 * the page, matching the light scheme's own separation, and body text
		 * on it is 13.0:1.
		 */
		--lc-band:      #16263a;
		--lc-rule:      rgba(232, 237, 243, 0.16);
		--lc-rule-firm: rgba(232, 237, 243, 0.32);
		/*
		 * All three golds converge on the brand value here, and that is the
		 * point rather than a shortcut: #c89b32 is 7.15:1 on the page and
		 * 5.97:1 on the band, so on a dark surface the identity colour is
		 * already legible as text and the split that paper forces is simply
		 * not needed. Section 3 of the harness asserts the convergence.
		 */
		--lc-accent:       var(--lc-caution);
		--lc-accent-text:  var(--lc-caution);
		--lc-accent-solid: var(--lc-caution);
		--lc-danger:    #e0797d;
		--lc-link:      #8bc4ec;
		--lc-link-hov:  #b8dcf6;
		--lc-invert-fg: var(--lc-ink-deep);
		--lc-invert-bg: #e8edf3;
		--lc-field-bg:  #16263a;

		/* The four statuses, re-inked for a dark page. The tints are mixed from
		   the ink so they follow it automatically; the ink figures are what
		   carry the reading: 9.2, 9.8, 7.4 and 10.0 against the page. */
		--lc-st-reported-fg:  #aeb9c6;
		--lc-st-reported-bg:  rgba(174, 185, 198, 0.14);
		--lc-st-review-fg:    #e0b95e;
		--lc-st-review-bg:    rgba(224, 185, 94, 0.14);
		--lc-st-evidenced-fg: #e88a8e;
		--lc-st-evidenced-bg: rgba(232, 138, 142, 0.14);
		--lc-st-corrected-fg: #8fc6ee;
		--lc-st-corrected-bg: rgba(143, 198, 238, 0.14);

		color-scheme: dark;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* The masthead is sticky, so an in-page anchor — every entry in an alert's
	   table of contents — would otherwise land underneath it. */
	scroll-padding-top: calc(var(--lc-head-h) + 1rem);
}

body {
	margin: 0;
	background: var(--lc-bg);
	color: var(--lc-fg);
	font-family: var(--lc-font);
	font-size: var(--lc-t-base);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;

	/* Inherited, and load-bearing on a narrow screen. This site is full of
	   strings that cannot be broken at a space — domain names, part numbers,
	   e-mail addresses — and German compounds on top of that. An alert titled
	   "apexpumpengineering.com — …" pushed a 320px viewport into horizontal
	   scroll without any single element being too wide, because the overflow
	   was the text, not the box.

	   `break-word` and not `anywhere`: it only breaks a string that cannot fit
	   on a line of its own, so inside the reading measure a domain is never
	   split. `.lc-atom` below refuses even that. */
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--lc-link);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	color: var(--lc-link-hov);
}

/*
 * The focus ring, and it is the reason `--lc-accent` may not be the brand gold
 * on paper: WCAG 1.4.11 asks 3:1 of a focus indicator, #c89b32 gives 2.56 and
 * #af882c gives 3.29. On every dark surface the token is the brand gold and the
 * ring measures 6.6:1 or better.
 */
:focus-visible {
	outline: 2px solid var(--lc-accent);
	outline-offset: 2px;
}

code,
kbd,
samp,
pre {
	font-family: var(--lc-mono);
	font-size: 0.9375em;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--lc-fg);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.014em;
}

p, ul, ol, dl, figure, table, blockquote, pre {
	margin: 0 0 1.15em;
}

hr {
	height: 0;
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--lc-rule);
}

::selection {
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
}

/* Part numbers are the reason anyone is here. Keeping them unmistakably
   literal lets a reader compare character by character against their own
   e-mail — which is the single action this whole site exists to support. */
code,
.lc-mono {
	font-family: var(--lc-mono);
	letter-spacing: 0.01em;
}

/*
 * A string that must never be broken mid-token: a domain, an e-mail address, a
 * part number.
 *
 * `body` sets `overflow-wrap: break-word`, which only splits a word that cannot
 * fit on a line by itself — so inside the 44rem measure nothing here was ever
 * being broken anyway. This is the explicit refusal, for the places where the
 * box *is* narrower than the string: a badge row, a table cell, a card.
 *
 * It deliberately does not set `white-space: nowrap`. That would trade a broken
 * domain for a page that scrolls sideways, which is the worse of the two, and
 * `.lc-alert__domain` below shows the pattern for the one place where the
 * string genuinely cannot be allowed to wrap: let it scroll inside its own box.
 */
.lc-atom {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.lc-shell {
	width: 100%;
	max-width: var(--lc-shell);
	margin-inline: auto;
	padding-inline: var(--lc-gutter);
}

/* Theme template roots. Horizontal space comes from `.lc-shell` inside them,
   never from the root — that keeps full-bleed bands (the hero plate, an image
   page head) possible without negative margins, and keeps one left edge across
   every page. `.lc-main` is deliberately not used here: it is the core plugin's
   own wrapper and carries a gutter of its own. */
.lc-home,
.lc-page,
.lc-single,
.lc-archive,
.lc-404 {
	display: block;
}

.lc-page,
.lc-single,
.lc-archive,
.lc-404 {
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/*
 * Reading templates narrow the shell to the reading column itself.
 *
 * Every block a reading page is built from — the prose, the register, the
 * severity banner, the plugin's evidence sections, the pagination, the empty
 * state — already carries `max-width: var(--lc-measure)`, and each one starts at
 * the shell's left edge. In a 72rem shell that put 44rem of content against 28rem
 * of nothing, down the right of every alert, every archive and every ordinary
 * page: measured at a 1467px viewport, 206px of margin on the left and 558px on
 * the right. The column was never centred on the viewport; it was pinned to the
 * left of a grid built for something else.
 *
 * Moving the *container* rather than centring each block is what makes this hold.
 * Two dozen rules cap something at the measure and a new one arrives every few
 * versions; adding `margin-inline: auto` to each means the next block written is
 * silently left-aligned beside a centred page, which is a bug nobody sees until
 * it ships. Here one rule moves the shell and everything inside follows — page
 * head included, so a title keeps the same left edge as the body under it.
 *
 * Below roughly 782px nothing changes: `--lc-shell-read` is wider than the
 * viewport there, `width: 100%` already governs, and the shell is the same box it
 * always was.
 */
.lc-single .lc-shell,
.lc-archive .lc-shell,
.lc-404 .lc-shell,
.lc-page .lc-shell {
	max-width: var(--lc-shell-read);
}

/*
 * …except where the lookup has answered, and except on an alert, which now
 * carries a table of contents beside the article.
 *
 * `.lc-results` is the one region the plugin renders that is not prose — a
 * verdict, a four-column seller table, a registry snapshot, a checklist — and
 * section 11b of `lc-components.css` already releases it from the measure for
 * exactly that reason. This is the same condition, read one level up so the page
 * head widens with the body instead of sitting indented beside it.
 *
 * `:has()` on the template root and not on the shell: the head is a *sibling* of
 * the shell holding the panel, so a test on the shell itself would widen the
 * answer and leave the title where it was.
 *
 * Where `:has()` is unsupported all of these drop out together and the page
 * renders at the reading measure: narrow, balanced, and the same fallback
 * section 11b already documents.
 */
.lc-single:has(.lc-results) .lc-shell,
.lc-archive:has(.lc-results) .lc-shell,
.lc-404:has(.lc-results) .lc-shell,
.lc-page:has(.lc-results) .lc-shell,
.lc-archive:has(.lc-filters) .lc-shell {
	max-width: var(--lc-shell);
}

/*
 * An alert takes the page grid from a class on its own root, and **not** from
 * `:has(.lc-toc)`, which is what it used until 1.10.0.
 *
 * That test was fragile in a way nothing had noticed. The contents list is only
 * rendered above `lc_theme_toc_minimum()` headings, so an alert with two
 * sections silently fell back to the reading shell — and now that the same
 * column carries a status card and an evidence card, the rail would have been
 * crushed into 17rem of a 44rem measure on exactly the alerts with the least in
 * them. A class `single.php` writes from `is_singular( LC_Post_Types::CASE )`
 * cannot miss.
 *
 * Doubled class on purpose: `.lc-single .lc-shell` is (0,2,0) and this has to
 * beat it, so the outcome does not depend on where in the file either sits.
 */
.lc-single.lc-alert-page .lc-shell {
	max-width: var(--lc-shell);
}

.lc-measure {
	max-width: var(--lc-measure);
}

/* The eyebrow, with its leading rule, is the theme's signature. It appears
   above every page title and every homepage section. */
.lc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	color: var(--lc-accent-text);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* `currentColor`, so the leading rule follows the word rather than the mark
   token. It is 2px and would clear 3:1 either way; matching the text is what
   keeps the eyebrow reading as one object. */
.lc-eyebrow::before {
	flex: 0 0 auto;
	width: 2rem;
	height: 2px;
	background: currentColor;
	content: "";
}

/* Without the rule: a label rather than a section mark. */
.lc-eyebrow--bare::before {
	display: none;
}

.lc-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--lc-invert-bg);
	color: var(--lc-invert-fg);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	text-decoration: none;
}

.lc-skip:focus {
	left: 1rem;
	top: 1rem;
	color: var(--lc-invert-fg);
}

.lc-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	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;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

/*
 * Three weights, and the primary one is the reason `--lc-accent-solid` exists.
 *
 * On paper the gold is a *fill* carrying deep navy at 6.64:1; it may not be ink
 * on white, where it is 2.56:1. On a dark band the tokens move and the same
 * declarations produce gold-on-navy without a second rule.
 *
 * Every button clears the 44px minimum target on its own padding: 0.85rem of
 * block padding around 17px text with a 1px border is 52px.
 */
.lc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--lc-radius);
	font-family: inherit;
	font-size: var(--lc-t-base);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/*
 * The border is the *text* gold, not the fill gold, and that is WCAG 1.4.11.
 *
 * A #c89b32 button on a white page is **2.56:1 against the page** — the label
 * inside it is fine at 6.64:1, but the control's own edge is below the 3:1
 * asked of the boundary that identifies it. A 1px rim in #7f6220 is 5.72:1
 * against paper and reads as a crisp edge rather than as a second colour.
 *
 * On every dark surface the two tokens converge on the brand gold, so the rim
 * disappears exactly where the fill is already 6.6:1 against its band and no
 * edge is needed.
 */
.lc-button--primary {
	border-color: var(--lc-accent-text);
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
}

/*
 * `--lc-fg` / `--lc-bg` on hover, never `--lc-ink` / `--lc-paper`.
 *
 * The literal pair looks right until the page is dark: `--lc-ink` (#111d2a) on
 * the dark scheme's #091525 page is **1.08:1**, so hovering the primary button
 * would make it disappear into the background. The semantic pair inverts with
 * the surface and is 17:1 on paper and 15.6:1 on a dark page.
 */
.lc-button--primary:hover,
.lc-button--primary:focus-visible {
	border-color: var(--lc-fg);
	background: var(--lc-fg);
	color: var(--lc-bg);
}

.lc-button--ghost {
	border-color: var(--lc-rule-firm);
	background: none;
	color: var(--lc-fg);
}

.lc-button--ghost:hover,
.lc-button--ghost:focus-visible {
	border-color: var(--lc-accent);
	color: var(--lc-fg);
}

/* On the red report card: paper on alarm, which is the one place a white
   button is the strongest thing available. */
.lc-button--onred {
	border-color: var(--lc-paper);
	background: var(--lc-paper);
	color: var(--lc-alarm);
}

.lc-button--onred:hover,
.lc-button--onred:focus-visible {
	border-color: var(--lc-paper);
	background: transparent;
	color: var(--lc-paper);
}

.lc-button__chevron {
	flex: 0 0 auto;
}

/*
 * A button shipped `hidden` has to be told to stay hidden.
 *
 * `[hidden]` is a UA `display: none` and `.lc-button`'s own `display:
 * inline-flex` is an author rule, so the button above renders in full while
 * carrying the attribute that says it must not. `.lc-slider__nav[hidden]` and
 * `.lc-copy[hidden]` both carry the same line for the same reason; this one is
 * here rather than in `warning-signs.css` because a component's own states
 * belong with the component — the call `.lc-icon__knockout` made at 1.5.6, where
 * a glyph's parts shipped in the homepage sheet and were styled on exactly one
 * template.
 *
 * Today's only caller is the checklist page's print button, which
 * `assets/js/theme.js` reveals once it has a `window.print()` to offer.
 */
.lc-button[hidden] {
	display: none;
}

/* ==========================================================================
   5. Masthead
   ========================================================================== */

/*
 * Sticky, and white on the light scheme.
 *
 * `var(--lc-bg)` rather than a literal `#fff`: the brief describes the light
 * scheme, which is the default, and a masthead hard-coded white would be the
 * one blazing rectangle on a dark-mode page. The value *is* white wherever the
 * brief is looking.
 *
 * A hairline rather than a shadow, per the same brief. `z-index` is fine here
 * and is not fine in `home.css`, where the hero's three layers are ordered by
 * paint order and a stacking index would put the wash under the thing it exists
 * to darken; the harness asserts there is none in that file.
 */
.lc-masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--lc-rule);
	background: var(--lc-bg);
}

.lc-masthead__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--lc-head-h);
}

.lc-brand {
	margin-right: auto;
}

.lc-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding-block: 0.5rem;
	color: var(--lc-fg);
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: -0.022em;
	text-decoration: none;
}

/* The mark: a shield with a magnifier in it. Two-tone from one file — the
   shield takes the accent, the glass inherits the surrounding text colour — so
   it needs no second asset for the dark scheme. */
.lc-mark {
	display: block;
	flex: 0 0 auto;
	overflow: visible;
}

.lc-mark__shield {
	stroke: var(--lc-accent);
	transition: stroke var(--lc-speed) ease;
}

.lc-mark__lens,
.lc-mark__grip {
	stroke: currentColor;
	transform-origin: 11.3px 10.5px;
	transition: transform var(--lc-speed) var(--lc-ease);
}

/*
 * Parts of a glyph that are not the glyph's own colour.
 *
 * **These live here rather than in `home.css`, and that is the whole point of
 * moving them.** `home.css` is enqueued behind `is_front_page()`, so a rule for
 * a glyph kept in there applies on exactly one template — and the glyphs it
 * styles are ordinary entries in `lc_theme_own_glyphs()` that any template may
 * ask for. The failure would be silent and specific: `advance-payment` on an
 * inner page would draw its coin with no knockout, so the document's own edge
 * shows straight through it, and with no gold. A glyph's parts belong to the
 * glyph, not to the page that happens to use it first.
 */

/* The knockout on `advance-payment`: the coin has to mask the document behind
   it. The icon pack does this with a literal `fill="white"`, which is a named
   colour with no named surface — a white disc the moment the glyph lands on the
   navy band. `--lc-bg` is whatever the surrounding band actually set. */
.lc-icon__knockout {
	fill: var(--lc-bg);
}

/* The gold detail the design reference draws on two of the three scam steps —
   the badge over the supplier, the coin on the document — and on neither the
   envelope nor anything else.
   `stroke`, never `color`: these glyphs carry `stroke="currentColor"` on the
   `<svg>`, so repointing `color` would take the entire drawing gold instead of
   the one shape inside it.
   `--lc-accent` follows the band — #af882c at 3.29:1 on paper, converging on the
   brand #c89b32 at 6.64:1 on any inverted one — where the literal gold the
   reference samples at is 2.56:1 on paper and fails even the 3:1 a mark needs. */
.lc-icon__accent {
	stroke: var(--lc-accent);
}

/* The glass nudges out along its own handle on hover — a lens being moved
   across something, which is the one gesture the site is about. */
.lc-brand__link:hover .lc-mark__lens,
.lc-brand__link:focus-visible .lc-mark__lens,
.lc-brand__link:hover .lc-mark__grip,
.lc-brand__link:focus-visible .lc-mark__grip {
	transform: translate(0.7px, 0.7px);
}

.lc-brand__link:hover .lc-mark__shield,
.lc-brand__link:focus-visible .lc-mark__shield {
	stroke: var(--lc-fg);
}

.custom-logo-link img {
	display: block;
	max-height: 2.5rem;
	width: auto;
}

/* Navigation. The selector covers both `wp_nav_menu` (.lc-nav__list) and the
   `wp_page_menu` fallback, which puts its class on the container rather than
   the list. */
.lc-nav ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-nav li {
	margin: 0;
}

/*
 * `min-height: 44px` on an `inline-flex`, not padding on an `inline-block`.
 *
 * The target has to be 44px tall for a thumb, and the *underline* has to sit
 * tight under the word rather than 14px below it — so the box is tall, the
 * text is centred in it, and the gold rule is drawn by a pseudo-element at the
 * text's own baseline instead of by the box's bottom border.
 */
.lc-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 500;
	text-decoration: none;
}

.lc-nav a::after {
	position: absolute;
	right: 0;
	bottom: calc(50% - 1.05em);
	left: 0;
	height: 2px;
	background: var(--lc-accent);
	content: "";
	opacity: 0;
	transition: opacity var(--lc-speed) ease;
}

.lc-nav a:hover,
.lc-nav a:focus-visible {
	color: var(--lc-fg);
}

.lc-nav a:hover::after,
.lc-nav a:focus-visible::after {
	opacity: 1;
}

.lc-nav .current-menu-item > a,
.lc-nav .current_page_item > a,
.lc-nav .current-menu-ancestor > a,
.lc-nav .current-page-ancestor > a {
	color: var(--lc-fg);
	font-weight: 600;
}

.lc-nav .current-menu-item > a::after,
.lc-nav .current_page_item > a::after,
.lc-nav .current-menu-ancestor > a::after,
.lc-nav .current-page-ancestor > a::after {
	opacity: 1;
}

/*
 * The one navigation item that is an action rather than a destination.
 *
 * `lc_theme_nav_cta_classes()` puts `lc-nav__cta` on whichever item links to
 * the page slugged `check`, and it is keyed on the slug for the same reason
 * `lc_theme_menu_labels()` is: a label is prose an editor may reword. A miss is
 * silent and harmless — the item stays an ordinary link, which is the correct
 * degradation.
 */
.lc-nav__cta > a {
	padding-inline: 1.15rem;
	/* The text gold on the rim, for the reason `.lc-button--primary` gives:
	   the fill alone is 2.56:1 against a white masthead. */
	border: 1px solid var(--lc-accent-text);
	border-radius: var(--lc-radius);
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
	font-weight: 600;
	transition: background-color var(--lc-speed) ease, border-color var(--lc-speed) ease, color var(--lc-speed) ease;
}

/* The semantic pair rather than the literal one, for the reason
   `.lc-button--primary:hover` spells out: #111d2a on a dark-scheme page is
   1.08:1 and the button would vanish. */
.lc-nav__cta > a:hover,
.lc-nav__cta > a:focus-visible,
.lc-nav .current-menu-item.lc-nav__cta > a,
.lc-nav .current_page_item.lc-nav__cta > a {
	border-color: var(--lc-fg);
	background: var(--lc-fg);
	color: var(--lc-bg);
}

/* The CTA is a filled control; a rule under it would read as an underlined
   button rather than as the current page. */
.lc-nav__cta > a::after {
	display: none;
}

.lc-navtoggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: transparent;
	color: var(--lc-fg);
	font-family: inherit;
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.lc-navtoggle__bars,
.lc-navtoggle__bars::before,
.lc-navtoggle__bars::after {
	display: block;
	width: 1rem;
	height: 2px;
	background: currentColor;
}

.lc-navtoggle__bars {
	position: relative;
}

.lc-navtoggle__bars::before,
.lc-navtoggle__bars::after {
	position: absolute;
	left: 0;
	content: "";
}

.lc-navtoggle__bars::before { top: -5px; }
.lc-navtoggle__bars::after  { top: 5px; }

/*
 * The collapsed menu, and the width it takes over at is measured rather than
 * chosen.
 *
 * It was 900px, which was right for five items. The part-number and domain
 * indexes at 1.5.2 made it seven, and seven no longer fit: measured on the
 * rendered masthead, the row wraps to two lines at every width up to 1250 and
 * sits on one from 1260. Between 901 and 1259 the nav was therefore a wrapped
 * two-row block — and that is not merely untidy, because it takes the masthead
 * from 81px to **93px** while `--lc-head-h` still says 5rem. That token is what
 * the scroll padding for in-page anchors, the sticky contents list on an alert
 * and this block's own `max-height` all clear the header by, so a wrapped nav
 * silently lands every anchored heading 13px underneath it.
 *
 * Tightening the row instead was measured and rejected: at 940px the nav needs
 * roughly 320px more than it has, which is not recoverable from gaps and letter
 * spacing without shrinking the labels past readable.
 *
 * 1279 and not the measured 1259: a breakpoint tuned to the exact pixel of
 * today's English labels wraps again the first time one is reworded, and the
 * failure is silent. 20px of headroom, and 1280 is a standard width, so the
 * full nav appears exactly where a reader expects it to. Re-measure this if the
 * item count or the labels change — that is what moved it this time.
 */
@media (max-width: 1279px) {
	.lc-masthead__inner {
		flex-wrap: wrap;
		padding-block: 0.75rem;
	}

	.lc-navtoggle {
		display: inline-flex;
	}

	/*
	 * The open menu is capped and scrolls. Without this a five-item menu on a
	 * short landscape phone runs off the bottom of a *fixed* box with no way
	 * to reach the last item.
	 */
	.lc-nav {
		display: none;
		flex-basis: 100%;
		max-height: calc(100dvh - var(--lc-head-h) - 1rem);
		overflow-y: auto;
		padding-top: 0.5rem;
		border-top: 1px solid var(--lc-rule);
	}

	.lc-nav.is-open {
		display: block;
	}

	.lc-nav ul {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.lc-nav a {
		display: flex;
		min-height: 3rem;
		border-bottom: 1px solid var(--lc-rule);
	}

	.lc-nav a::after {
		display: none;
	}

	.lc-nav .current-menu-item > a,
	.lc-nav .current_page_item > a {
		box-shadow: inset 3px 0 0 var(--lc-accent);
		padding-left: 0.85rem;
	}

	.lc-nav li:last-child a {
		border-bottom: 0;
	}

	/* Full width, and its own row: a gold bar reading "Check a part number" is
	   the one thing on a phone worth that much of the menu. */
	.lc-nav__cta > a {
		justify-content: center;
		margin-block: 0.75rem 0.25rem;
		border-bottom: 1px solid var(--lc-accent-solid);
	}

	.lc-nav__cta > a:hover,
	.lc-nav__cta > a:focus-visible,
	.lc-nav .current-menu-item.lc-nav__cta > a,
	.lc-nav .current_page_item.lc-nav__cta > a {
		box-shadow: none;
		padding-left: 1.15rem;
		border-bottom-color: var(--lc-fg);
	}
}

/* ==========================================================================
   6. Page head
   ========================================================================== */

.lc-pagehead {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--lc-rule);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lc-pagehead--flush {
	padding-inline: 0;
}

.lc-pagehead__title {
	max-width: 22ch;
	font-size: var(--lc-t-2xl);
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.lc-pagehead__lede {
	max-width: var(--lc-measure);
	margin: 1.1rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-md);
	line-height: 1.6;
}

.lc-pagehead__meta {
	margin: 1rem 0 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	letter-spacing: 0.02em;
}

.lc-pagehead__sep {
	padding-inline: 0.35rem;
}

/*
 * A page head carrying a photograph, under a **flat** navy wash.
 *
 * A `linear-gradient()` with one colour at both stops, not a fade: the brief
 * rules out gradients, and this is the ordinary way to composite a solid colour
 * over a background image in one declaration. Nothing about it graduates.
 *
 * The opacity is chosen from the worst case rather than from how this
 * particular photograph happens to look. Over a blown-out white region the ink
 * composites to rgb(41, 52, 63), which gives white body text 12.7:1 and the
 * amber eyebrow 4.94:1 — both clear AA, so swapping the image later cannot
 * quietly break legibility. At 0.86 the eyebrow would be 4.32 and would fail.
 *
 * Plain `rgba()` rather than `color-mix()` on a token: if that declaration were
 * ever dropped by an older browser the text would sit on the bare photograph.
 */
.lc-pagehead--image {
	position: relative;
	padding-block: clamp(3rem, 7vw, 4.5rem);
	border-bottom: 0;
	background-image:
		linear-gradient(rgba(17, 29, 42, 0.9), rgba(17, 29, 42, 0.9)),
		var(--lc-head-image);
	background-repeat: no-repeat;
	background-size: cover, cover;
	background-position: center, center 40%;
}

/*
 * Any band that puts text on deep navy, whether or not a photograph is under it.
 *
 * Re-points the semantic tokens rather than restyling each element. Everything
 * inside — eyebrow, title, meta line, rules, the lookup field and its button —
 * already reads from these, so the band inverts in one place and stays correct
 * for anything added to it later. It is also identical in both colour schemes,
 * because the surface is deep navy either way.
 *
 * Three of these are load-bearing rather than cosmetic:
 *
 * The golds all move to the brand value. #af882c manages 3.0:1 over this navy
 * and would fail as text; #c89b32 gives 6.64:1.
 *
 * `--lc-bg` must move with `--lc-fg`. The submit button is
 * `background: var(--lc-fg); color: var(--lc-bg)` — repointing only the
 * foreground would give a white button with white text.
 *
 * `--lc-danger` moves too. #a12e32 on this navy is 2.39:1.
 */
.lc-onimage {
	--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-band:      rgba(255, 255, 255, 0.07);
	--lc-accent:       var(--lc-caution);
	--lc-accent-text:  var(--lc-caution);
	--lc-accent-solid: var(--lc-caution);
	--lc-danger:    #e0797d;
	--lc-link:      #9ccdf2;
	--lc-link-hov:  #c8e4fa;
	--lc-rule:      rgba(255, 255, 255, 0.2);
	--lc-rule-firm: rgba(255, 255, 255, 0.42);
	--lc-field-bg:  rgba(255, 255, 255, 0.1);

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

/*
 * …and its mirror: any surface that is **paper in both colour schemes**.
 *
 * `.lc-onimage` above is the deep-navy re-point and has always lived here.
 * This is the same technique with the tokens the other way up, and it lived in
 * `home.css` as `.lc-sec--paper` until 1.7.0 — not because it is a homepage
 * rule, but because its first two callers happened to be homepage bands. The
 * checklist page is the third and `home.css` is not loaded there, so the block
 * moved here beside the mirror it always was. Renamed with it: it re-points
 * tokens on whatever element carries it and never knew anything about
 * `.lc-sec`, so a modifier name promising a base class it does not use is a
 * promise nobody can keep on `<main class="lc-guide lc-onpaper">`.
 *
 * **Why pin at all.** Some surfaces are part of the identity rather than part
 * of the scheme — the way `.lc-report-card`'s red fill is. The design
 * references draw "How the scam works", the homepage's warning-signs band and
 * the whole of `/warning-signs/` below its hero on paper, and a reader on a
 * dark-mode OS was getting dark surfaces where the design has the page's one
 * light field.
 *
 * **Re-pointing the tokens is the whole technique, and a `background` alone
 * would be a bug.** Setting the fill without the ink is exactly the failure
 * written up under "Named ink must travel with a named surface": the headings,
 * the intros, the details and the rules all read `--lc-fg` / `--lc-fg-soft` /
 * `--lc-rule-firm`, which on the dark scheme are near-white. White ink on a
 * white band is the 1.16:1 `.lc-host-check` bug with the surfaces swapped.
 *
 * There is deliberately **no `@media (prefers-color-scheme: dark)` around
 * this**. A custom property declared on an element beats `:root` for that
 * element's subtree in either scheme, so one block is both schemes; wrapping it
 * in a media query would mean the light branch silently depended on `:root`
 * agreeing with it. That agreement is an assertion instead — section 13 of
 * `tools/test-theme-contrast.php` reads every token declared here and fails if
 * it has drifted from the `:root` value it is supposed to be restating.
 *
 * The status pairs are restated even though no caller carries a badge today.
 * They are cheap, and the alternative is that the first alert card ever dropped
 * into a pinned band renders dark-scheme ink on white without anybody touching
 * this file.
 *
 * `color-scheme: light` is the non-CSS half: it is what stops a UA painting a
 * dark form control, scrollbar or spellcheck underline inside a white band —
 * which the checklist page needs, because the lookup field in its rail is one.
 *
 * **It composes with `.lc-onimage` rather than fighting it.** The checklist
 * page carries this on its `<main>` and `.lc-onimage` on the hero *inside* it;
 * a declaration on the nearer ancestor wins for that subtree, so the hero is
 * navy and everything below it is paper, from two classes and no media query.
 */
.lc-onpaper {
	--lc-fg:           var(--lc-ink);
	--lc-fg-soft:      var(--lc-slate);
	--lc-fg-quiet:     rgba(17, 29, 42, 0.62);
	--lc-bg:           var(--lc-paper);
	--lc-band:         var(--lc-muted);
	--lc-rule:         rgba(17, 29, 42, 0.13);
	--lc-rule-firm:    rgba(17, 29, 42, 0.28);
	--lc-accent:       var(--lc-caution-mark);
	--lc-accent-text:  var(--lc-caution-text);
	--lc-accent-solid: var(--lc-caution);
	--lc-danger:       var(--lc-alarm);
	--lc-link:         #0b4f8a;
	--lc-link-hov:     #083a66;
	--lc-invert-fg:    var(--lc-paper);
	--lc-invert-bg:    var(--lc-ink);
	--lc-field-bg:     var(--lc-paper);

	--lc-st-reported-fg:  #4e5762;
	--lc-st-reported-bg:  #e9ecf0;
	--lc-st-review-fg:    var(--lc-caution-text);
	--lc-st-review-bg:    #f9f2e3;
	--lc-st-evidenced-fg: #8f2226;
	--lc-st-evidenced-bg: #fbeaea;
	--lc-st-corrected-fg: #1b5b91;
	--lc-st-corrected-bg: #e8f0f8;

	background: var(--lc-paper);
	color: var(--lc-fg);
	color-scheme: light;
}

/* The archive page head is one such band. */
.lc-pagehead--image {
	--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);

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

/* A hairline would be lost against the band edge; the gold keeps the join
   deliberate and ties it to the eyebrow above it. */
.lc-pagehead--image::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--lc-accent);
	content: "";
}

/* ==========================================================================
   7. Evidence-status badge
   ========================================================================== */

/*
 * The four statuses the register uses, in one component.
 *
 * Named `.lc-badge` rather than `.lc-status`, which the homepage register
 * readout already owns, and rather than the old `.lc-sev`, which named a
 * severity scale with three values where the editorial workflow has four.
 *
 * Every modifier carries its wording as text. The tint is an aid, not the
 * message: `display: none` on the colours would lose no information, which is
 * the same test `LC_Icons` glyphs have to pass.
 */
.lc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid transparent;
	border-radius: var(--lc-radius);
	font-size: var(--lc-t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

.lc-badge--reported {
	border-color: color-mix(in srgb, var(--lc-st-reported-fg) 24%, transparent);
	background: var(--lc-st-reported-bg);
	color: var(--lc-st-reported-fg);
}

.lc-badge--review {
	border-color: color-mix(in srgb, var(--lc-st-review-fg) 24%, transparent);
	background: var(--lc-st-review-bg);
	color: var(--lc-st-review-fg);
}

.lc-badge--evidenced {
	border-color: color-mix(in srgb, var(--lc-st-evidenced-fg) 24%, transparent);
	background: var(--lc-st-evidenced-bg);
	color: var(--lc-st-evidenced-fg);
}

.lc-badge--corrected {
	border-color: color-mix(in srgb, var(--lc-st-corrected-fg) 24%, transparent);
	background: var(--lc-st-corrected-bg);
	color: var(--lc-st-corrected-fg);
}

/*
 * Not a status.
 *
 * `search.php` chips each result with its post type — "Alert", "Page" — which
 * is a *kind* of thing, not a stage in the editorial workflow. It takes the
 * neutral palette and its own name, because a result labelled `--reported` in
 * the markup would be claiming something about a page that has no status at
 * all. The class it replaces, `.lc-sev--unverified`, said exactly that.
 */
.lc-badge--kind {
	border-color: color-mix(in srgb, var(--lc-st-reported-fg) 24%, transparent);
	background: var(--lc-st-reported-bg);
	color: var(--lc-st-reported-fg);
}

/* ==========================================================================
   8. Register (archives and lists)
   ========================================================================== */

.lc-register {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lc-rule);
}

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

.lc-register__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 0.85rem;
	margin: 0 0 0.6rem;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	letter-spacing: 0.05em;
}

.lc-register__domain {
	color: var(--lc-fg-soft);
	font-family: var(--lc-mono);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.lc-register__title {
	margin: 0 0 0.4rem;
	max-width: var(--lc-measure);
	font-size: var(--lc-t-lg);
	letter-spacing: -0.018em;
}

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

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

.lc-register__excerpt {
	margin: 0;
	max-width: var(--lc-measure);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
}

/* The part numbers an entry names, as literal strings rather than links. The
   archive row is a summary; the links live on the alert itself. */
.lc-register__parts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.lc-register__part {
	padding: 0.15rem 0.5rem;
	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-sm);
}

.lc-empty {
	max-width: var(--lc-measure);
	padding-block: 2rem 4rem;
	color: var(--lc-fg-quiet);
}

/* ---- Term index --------------------------------------------------------- */

/*
 * The index of one taxonomy — every part number, or every supplier domain, with
 * the number of published alerts behind it.
 *
 * Shaped as the same hairline-separated list `.lc-register` above it is, because
 * it is the same kind of object seen at a coarser grain, and two list treatments
 * on one site would be two things to keep in step for no reader's benefit. It
 * inherits the reading measure from `.lc-prose` rather than setting one: a part
 * number is fifteen characters and the count is two, so a wider column would put
 * the two ends of a row an inch apart with nothing between them.
 */
.lc-termindex {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lc-rule);
}

.lc-termindex__item {
	border-bottom: 1px solid var(--lc-rule);
}

/*
 * The whole row is the target, and `min-height` is why rather than padding
 * alone: the brief sets a 44px floor for anything touchable and 2.75rem is
 * exactly that, held whatever the two labels' metrics turn out to be. Padding
 * would give the same answer today and a different one the first time the count
 * string changes length in another language.
 */
.lc-termindex__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.75rem;
	padding-block: 0.7rem;
	color: var(--lc-fg);
	text-decoration: none;
}

/* The accent underline the register's own titles use, so a row here and a row
   there answer the pointer identically. On the name alone — underlining the
   count as well would read as two links in one row. */
.lc-termindex__link:hover .lc-termindex__name,
.lc-termindex__link:focus .lc-termindex__name {
	text-decoration: underline;
	text-decoration-color: var(--lc-accent);
	text-decoration-thickness: 2px;
}

/* Monospace, and not a stylistic choice: this is the string a reader is about to
   compare character by character against a quotation. Same reasoning as the
   alert page's H1 and `.lc-register__domain` beside it. */
.lc-termindex__name {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--lc-mono);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/*
 * `flex-shrink: 0` so the count never wraps to a second line while the name
 * still has room to break — a two-line "1 alert" beside a one-line part number
 * is the only way this row can look broken, and `overflow-wrap: anywhere` on the
 * name makes the name the thing that gives way instead.
 */
.lc-termindex__count {
	flex: 0 0 auto;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.lc-termindex__empty {
	margin: 2rem 0 0;
	color: var(--lc-fg-soft);
}

/* ==========================================================================
   9. Archive filters
   ========================================================================== */

/*
 * A plain GET form. No JavaScript anywhere in it: the controls are `select`s
 * and a text input, the whole thing submits, and the resulting URL is
 * shareable and back-buttonable — which a script-driven filter is not without
 * a great deal of work nobody asked for.
 *
 * The parameter names are `lca_*` and that prefix is load-bearing.
 * `LC_Lookup::maybe_redirect()` fires on **any** request carrying `lc_q` and
 * bounces it to the results page, so a filter form using the obvious name would
 * throw the visitor off the archive the moment they pressed Search.
 */
.lc-filters {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

/* `min-width: 0` is load-bearing on a fieldset: it has a UA `min-width:
   min-content`, so a grid inside one refuses to shrink below its widest option
   label and a long domain in the select pushes the whole page sideways. */
.lc-filters fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.lc-filters__legend {
	padding: 0;
	margin: 0 0 0.9rem;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

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

@media (min-width: 640px) {
	.lc-filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-filters__field--wide {
		grid-column: 1 / -1;
	}
}

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

	.lc-filters__field--wide {
		grid-column: span 3;
	}
}

.lc-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.lc-filters__label {
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-filters__input,
.lc-filters__select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-field-bg);
	color: var(--lc-fg);
	font-family: inherit;
	font-size: var(--lc-t-ui);
}

.lc-filters__input:focus,
.lc-filters__select:focus {
	border-color: var(--lc-fg);
}

.lc-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.1rem;
}

.lc-filters__actions .lc-button {
	min-height: 2.75rem;
	padding-block: 0.55rem;
	font-size: var(--lc-t-ui);
}

.lc-filters__count {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-ui);
}

/* ==========================================================================
   10. Alert detail
   ========================================================================== */

/*
 * The domain is the headline.
 *
 * Someone arrives here having pasted a domain into a search engine, and the
 * first thing they need is to confirm character by character that it is the one
 * in their inbox — so it is monospace, it is the H1, and it does not break.
 *
 * `.lc-atom` refuses the mid-token break; `overflow-x: auto` is what makes that
 * safe. A 30-character domain at the top of this clamp does not fit a 320px
 * viewport at any size worth calling a headline, and the choice is between a
 * heading that scrolls inside its own box and a page that scrolls sideways.
 * The first is recoverable and the second is the bug `.lc-sellers__scroll` and
 * the card strip were both fixed for.
 */
.lc-alert__domain {
	max-width: 100%;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	font-family: var(--lc-mono);
	font-size: clamp(1.625rem, 4.6vw, 2.75rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
	scrollbar-width: thin;
}

.lc-alert__subtitle {
	max-width: var(--lc-measure);
	margin: 1rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-md);
	font-weight: 400;
	line-height: 1.55;
}

.lc-alert__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-rule);
}

.lc-alert__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

.lc-alert__date-label {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * There is deliberately no risk-recommendation block here.
 *
 * The design brief asks for one at the top of an alert, and the page already
 * has it: `LC_Templates::append_evidence()` prepends `LC_Render::banner()` to
 * the content, so the first thing inside the article — directly under this
 * header — is the severity label and the sentence saying what to do about it
 * ("Public records contradict this operation's own claims about itself. Do not
 * pay in advance.").
 *
 * Writing a second one here would publish the same allegation about a named
 * business twice on one page in two different wordings, which is the exact
 * hazard `single.php` is written to avoid and the reason that template renders
 * nothing but `the_content()`. The banner is styled by section 4 of
 * `lc-components.css`.
 */

/* --- Copy buttons ------------------------------------------------------- */

/*
 * Progressive enhancement, and the fallback is the whole reason it is shaped
 * this way.
 *
 * The markup is a `<button hidden>` beside the value it copies; `theme.js`
 * un-hides it only where `navigator.clipboard` exists. With no script the
 * reader sees the domain and the part number as selectable text and copies
 * them the way they always have — rather than a control that does nothing,
 * which is the failure mode the seller panel and the Reports viewer are both
 * written to avoid.
 */
.lc-copy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/* `[hidden]` is a UA `display: none` and the `display: flex` above would
   silently outrank it — the same trap `.lc-slider__nav` documents. Without this
   the list renders as an empty flex row for every visitor without a clipboard
   API, which is exactly who it is hidden from. */
.lc-copy[hidden] {
	display: none;
}

.lc-copy__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: none;
	color: var(--lc-fg);
	font-family: inherit;
	font-size: var(--lc-t-sm);
	cursor: pointer;
	transition: border-color var(--lc-speed) ease, color var(--lc-speed) ease;
}

.lc-copy__btn[hidden] {
	display: none;
}

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

.lc-copy__value {
	font-family: var(--lc-mono);
	font-weight: 600;
}

.lc-copy__state {
	color: var(--lc-accent-text);
	font-weight: 600;
}

/* --- Table of contents --------------------------------------------------- */

/*
 * Sticky beside the article, above it on a narrow screen, and never hidden.
 *
 * `position: sticky` is not `animation-*` or `transition-*`, so the global
 * reduced-motion block at the end of this file does not reach it — the same
 * trap the method figure on the homepage documents. It gets its own override.
 */
.lc-alert__layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * The contents list is first in the DOM and moved into the right-hand column
 * here, which is the only arrangement that is right in all three readings of
 * the page: on a narrow screen it stacks above the article, a screen reader
 * meets the outline before the thing it outlines, and on a desktop it sits in
 * the rail where a reader expects it.
 *
 * `justify-content: center` with a *bounded* first column, not `1fr`. The shell
 * widens to the full page grid for a page carrying a contents list, and `1fr`
 * would hand the article whatever that grid has left over — 832px when the grid
 * was 72rem, and past a thousand now that it is 94rem. Either is well clear of
 * the 700-760px the brief sets for a reading column, and past the measure every
 * block inside it caps itself at anyway. Bounding the track and centring the
 * pair keeps the article at its measure with the margins equal by construction,
 * which is the same argument `--lc-shell-read` makes one level up — and it is
 * why widening the page grid at 1.5.1 moved nothing on this page but the
 * whitespace either side of it.
 */
@media (min-width: 62rem) {
	.lc-alert__layout {
		grid-template-columns: minmax(0, var(--lc-measure)) minmax(0, 20rem);
		justify-content: center;
	}

	.lc-alert__body {
		grid-column: 1;
		grid-row: 1;
	}

	/*
	 * **The rail is the grid item and the sticky box; the cards inside it are
	 * neither.** Two sticky siblings in one grid item stop at the same offset
	 * and overlap as the page scrolls — the trap `.lc-registry__rail` and
	 * `.lc-index__rail` both carry. Until 1.10.0 `.lc-toc` was the grid item
	 * *and* the sticky element, because it was the only thing in that column;
	 * it is one of three now.
	 *
	 * `.lc-toc` keeps its own rule for the one page that still renders it bare:
	 * an ordinary single post long enough to earn a contents list has no rail
	 * to put it in.
	 *
	 * 20rem rather than 17: the status card is a two-column definition list and
	 * "Evidence last checked" against a date needs the width. The article keeps
	 * its measure either way — the first track is bounded, not `1fr`, for the
	 * reason above.
	 */
	.lc-alert__layout > .lc-alert__rail,
	.lc-alert__layout > .lc-toc {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--lc-head-h) + 1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-alert__layout > .lc-alert__rail,
	.lc-alert__layout > .lc-toc {
		position: static;
	}
}

.lc-toc {
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--lc-rule);
	border-top: 3px solid var(--lc-accent);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
	font-size: var(--lc-t-ui);
}

.lc-toc__heading {
	margin: 0 0 0.75rem;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lc-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-toc__list a {
	display: block;
	padding: 0.4rem 0;
	color: var(--lc-fg-soft);
	line-height: 1.4;
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
	transition: color var(--lc-speed) ease, border-color var(--lc-speed) ease;
}

.lc-toc__list a:hover,
.lc-toc__list a:focus-visible {
	color: var(--lc-fg);
	border-left-color: var(--lc-accent);
}

.lc-toc__list a[aria-current="true"] {
	color: var(--lc-fg);
	font-weight: 600;
	border-left-color: var(--lc-accent);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.lc-pagination {
	padding-block: 2rem 4rem;
}

.lc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.lc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	text-align: center;
	text-decoration: none;
}

.lc-pagination .page-numbers:hover,
.lc-pagination .page-numbers:focus {
	border-color: var(--lc-rule-firm);
	color: var(--lc-fg);
}

.lc-pagination .page-numbers.current {
	border-color: var(--lc-fg);
	background: var(--lc-fg);
	color: var(--lc-bg);
	font-weight: 600;
}

/* ==========================================================================
   12. Prose
   ========================================================================== */

.lc-prose {
	max-width: var(--lc-measure);
}

/*
 * Two selectors, not one. On an ordinary page the editor content sits directly
 * inside `.lc-prose`; on an alert the plugin wraps it in `.lc-body` and appends
 * its own sections as siblings. `.lc-prose > h2` alone would style the first
 * and silently miss the second. Both stay scoped by the child combinator so
 * they never reach the plugin's own headings, which have their own scale.
 */
.lc-prose > h2,
.lc-body > h2 {
	margin: 2.5rem 0 0.85rem;
	font-size: var(--lc-t-xl);
}

.lc-prose > h3,
.lc-body > h3 {
	margin: 2rem 0 0.6rem;
	font-size: var(--lc-t-lg);
}

.lc-prose > h4,
.lc-body > h4 {
	margin: 1.75rem 0 0.5rem;
	font-size: var(--lc-t-md);
}

.lc-prose > *:first-child,
.lc-body > *:first-child {
	margin-top: 0;
}

/*
 * Scoped with `:not([class])`. Every list the core plugin emits carries a class
 * — `lc-facts__list`, `lc-flags__list`, `lc-parts__list`, `lc-cases`,
 * `lc-selfcheck__steps` — and several of them draw their own numerals through
 * CSS counters. Restoring markers on those renders "1 1.". Editor content is
 * what wants markers, and editor lists are unclassed.
 *
 * **That `:not([class])` used to be in this comment and not in the selector.**
 * The `>` combinator was quietly doing the work instead: every plugin list sits
 * inside `.lc-results`, so none of them is a *direct* child of `.lc-prose` and
 * none was ever reached. Which held exactly as long as nothing the theme owns
 * was rendered straight into a prose column — and `.lc-termindex` at 1.5.2 is.
 * The part-number index shipped with disc bullets and a 1.35rem indent, against
 * its own `list-style: none; padding: 0`, which it loses on specificity:
 * `.lc-prose > ul` is (0,1,1) to `.lc-termindex`'s (0,1,0).
 *
 * Writing what the comment already claimed fixes that one and every one after
 * it, which is the point — the next theme-owned list dropped into prose should
 * not have to know this rule exists. Gutenberg content is untouched: its lists
 * carry `wp-block-list`, which the selectors below answer by name.
 */
.lc-prose > ul:not([class]), .lc-prose > ol:not([class]),
.lc-body > ul:not([class]), .lc-body > ol:not([class]),
.lc-prose .wp-block-list,
.lc-body .wp-block-list {
	margin-block: 1.15em;
	padding-left: 1.35rem;
}

.lc-prose > ul:not([class]), .lc-body > ul:not([class]), ul.wp-block-list { list-style: disc; }
.lc-prose > ol:not([class]), .lc-body > ol:not([class]), ol.wp-block-list { list-style: decimal; }

.lc-prose > ul:not([class]) > li + li,
.lc-prose > ol:not([class]) > li + li,
.lc-body > ul:not([class]) > li + li,
.lc-body > ol:not([class]) > li + li,
.lc-prose .wp-block-list > li + li,
.lc-body .wp-block-list > li + li {
	margin-top: 0.4em;
}

.lc-prose > blockquote,
.lc-body > blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--lc-accent);
	color: var(--lc-fg-soft);
}

.lc-prose > table,
.lc-body > table,
.lc-prose > figure > table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lc-t-ui);
}

.lc-prose > table :is(th, td),
.lc-body > table :is(th, td),
.lc-prose > figure > table :is(th, td) {
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--lc-rule);
	text-align: left;
	vertical-align: top;
}

.lc-prose figure {
	margin-inline: 0;
}

.lc-prose figcaption {
	margin-top: 0.5rem;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

/* Wide alignment has nowhere to go inside a reading measure. */
.lc-prose .alignwide,
.lc-prose .alignfull {
	max-width: 100%;
	margin-inline: 0;
}

/* ==========================================================================
   13. Search form
   ========================================================================== */

.lc-searchform {
	max-width: var(--lc-measure);
}

.lc-searchform__label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-searchform__row {
	display: flex;
	gap: 0.5rem;
}

.lc-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-field-bg);
	color: var(--lc-fg);
	font-family: inherit;
	font-size: var(--lc-t-base);
}

.lc-searchform__submit {
	min-height: 2.75rem;
	padding: 0.65rem 1.1rem;
	border: 1px solid var(--lc-fg);
	border-radius: var(--lc-radius);
	background: var(--lc-fg);
	color: var(--lc-bg);
	font-family: inherit;
	font-size: var(--lc-t-ui);
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   14. 404
   ========================================================================== */

.lc-404__lookup {
	max-width: var(--lc-measure);
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* ==========================================================================
   15. Support band and colophon
   ========================================================================== */

/*
 * The support band, between the last section of the page and the colophon.
 *
 * It is a *card on the page*, not a band of its own, and the two colours are
 * `--lc-bg` and `--lc-band` — the same pair every other band on the site is
 * separated by. Nothing warmer is invented for it: the seven brand constants are
 * the whole palette and the light gray is what a raised surface is made of here.
 * On the dark scheme the same two tokens make a navy card on a darker page, so
 * the band needs no scheme branch of its own.
 *
 * `background` is declared rather than inherited, and that is what guarantees
 * the card is visible at all. The section above this one belongs to whichever
 * template is being rendered — on the homepage it is paper, on an archive it may
 * be `--lc-band` — and a transparent wrapper would put a `--lc-band` card on a
 * `--lc-band` section, which is 1:1 and the 1.005:1 disaster this project has
 * already shipped once. Ink travels with it, per the standing rule.
 */
.lc-support {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	background: var(--lc-bg);
	color: var(--lc-fg);
}

/*
 * The card's edge is `--lc-rule-firm` rather than `--lc-rule`. The fill is
 * 1.09:1 against paper, so on the light scheme the edge is doing most of the
 * work of saying where the card is — the same argument `.lc-signs` makes about
 * two consecutive bands sharing a fill, one property along.
 */
.lc-support__card {
	display: grid;
	gap: 1.75rem;
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--lc-rule-firm);
	border-radius: calc(var(--lc-radius) * 2);
	background: var(--lc-band);
}

/*
 * One row at the width the intro and a row of buttons both fit on. Below it they
 * stack, which is also what a phone gets.
 *
 * **`minmax(22rem, 1fr)`, and the `0` this replaces was a real collision.** The
 * second track is `auto`, so it sizes to the buttons' max-content — and with
 * three destinations configured that is most of the card. A first track whose
 * *minimum* is zero then collapses to nothing while the heading and the blurb,
 * which are flex items and will not shrink past their own min-content, overflow
 * it: the title rendered three words wide and the buttons printed on top of it.
 * A real minimum is what makes the `auto` track give way instead, and the
 * buttons wrap, which is what they are laid out to do.
 *
 * The live install has one destination and never showed it. The preview renders
 * all three, which is the whole reason it renders all three.
 */
@media (min-width: 62rem) {
	.lc-support__card {
		gap: 2.5rem;
		grid-template-columns: minmax(22rem, 1fr) auto;
	}
}

.lc-support__intro {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/*
 * `--lc-accent`, not the brand `--lc-caution` this is drawn from. #c89b32 is
 * 2.56:1 on paper and under even the 3:1 a mark needs; #af882c is the same hue
 * darkened until it clears, which is the whole reason that token exists. On the
 * dark scheme both resolve to the brand gold and the drawing is unchanged.
 */
.lc-support__glyph {
	flex: 0 0 auto;
	color: var(--lc-accent);
}

.lc-support__title {
	margin: 0 0 0.35rem;
	font-size: var(--lc-t-xl);
	letter-spacing: -0.016em;
}

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

.lc-support__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Only once they are beside the intro. Stacked under it — which is every phone —
   right-aligned buttons under a left-aligned paragraph is two left edges and no
   right one. */
@media (min-width: 62rem) {
	.lc-support__actions {
		justify-content: flex-end;
	}
}

/*
 * `position: relative` is load-bearing rather than tidy, and it is the
 * `.lc-sellers__scroll` trap: the "(opens in a new tab)" note is a
 * `.lc-visually-hidden` span, which is `position: absolute`, and with no
 * positioned ancestor it resolves against the initial containing block. That is
 * exactly how a 1px span once pushed `documentElement.scrollWidth` 41px past the
 * viewport. `.lc-button` declares no position of its own, so it has to be here.
 *
 * Two such spans on a payment button since 1.6.2 — the name and the new-tab
 * note — which does not change the argument but doubles what it is holding.
 */
.lc-support__action {
	position: relative;
}

.lc-support__action .lc-brand,
.lc-support__mark {
	flex: 0 0 auto;
}

/*
 * A payment destination is its provider's mark and nothing else. The report
 * button keeps its wording, because a shield is not a logo anybody recognises.
 *
 * **The mark is therefore the control, which is the one thing a glyph on this
 * site is otherwise never allowed to be.** Everywhere else a drawing sits beside
 * wording that already says the same thing, and `display: none` on the set would
 * lose no information. Not here: `footer.php` writes the label back as a
 * `.lc-visually-hidden` span, and dropping that half leaves a 53px link a screen
 * reader announces as its own URL. It is the 1.5.7 contract returning for these
 * three buttons and for nothing else on the page.
 *
 * **The border is not what identifies these, and it does not have to be.**
 * `--lc-rule-firm` against the card measures **1.82:1** on light and 2.60:1 on
 * dark, under the 3:1 WCAG 1.4.11 asks — but 1.4.11 asks that of the visual
 * information *required to identify* the control, and here that is the mark:
 * 15.75:1 inside a ghost button, 6.64:1 inside the gold one. Firming the edge on
 * three of the four buttons in this row would also break the thing that makes
 * them read as one group. Measured, then left alone deliberately.
 *
 * Square-ish rather than square: 24px of drawing inside 0.85rem of padding is
 * 53.2 × 52. The floor that matters is WCAG 2.5.8's 24px target and this clears
 * it twice over — which is why the mark sits in a *button* rather than being a
 * bare 28px logo in a row of them, as it was at 1.5.7.
 */
.lc-support__action--mark {
	min-width: 3.25rem;
	padding-inline: 0.85rem;
}

/*
 * The colophon is a deep-navy surface in both colour schemes as of 1.6.0.
 *
 * On the dark scheme it always was — `--lc-band` resolves to #16263a there — so
 * only the light scheme moves, from the #f5f6f8 gray to the brand navy. That is
 * the design reference, and it also retires the thinnest colour margin on the
 * site: the accent measured **3.04:1** on the light band and was the hover
 * colour for everything in here, one token edit from failing. On navy the same
 * gold is 6.64:1 and legible as *text*, which is what lets the column headings
 * be gold rather than quiet gray.
 *
 * Re-points the semantic tokens rather than restyling each element, exactly as
 * `.lc-onimage` does and for the same reason: everything inside — the headings,
 * the lists, the rules, the marks — already reads from them, so the band
 * inverts in one place and stays correct for whatever is added to it later.
 * `--lc-link` is in the set because `a { color: var(--lc-link) }` is global, so
 * an ordinary link dropped into the corrections column would otherwise land at
 * about 2.6:1.
 *
 * **`--lc-band` is the one token deliberately *not* repointed**, and that is
 * structural rather than an omission: it is where the dark scheme's own surface
 * value comes from, four lines below. Nothing inside the colophon paints a band
 * within the band, and `.lc-pagehead--image` omits it for the same reason.
 */
.lc-colophon {
	/*
	 * Named, because the two schemes disagree about it and nothing else in the
	 * block does. #111d2a on the dark page's #091525 is **1.08:1** — the same
	 * colour to any eye, and the exact 1.4.0 failure this file records — so the
	 * dark scheme keeps the band value it already had.
	 */
	--lc-colophon-bg: var(--lc-ink);

	--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-colophon-bg);
	--lc-accent:       var(--lc-caution);
	--lc-accent-text:  var(--lc-caution);
	--lc-accent-solid: var(--lc-caution);
	--lc-danger:    #e0797d;
	--lc-link:      #9ccdf2;
	--lc-link-hov:  #c8e4fa;
	--lc-rule:      rgba(255, 255, 255, 0.2);
	--lc-rule-firm: rgba(255, 255, 255, 0.42);
	--lc-field-bg:  rgba(255, 255, 255, 0.1);

	margin-top: auto;
	padding-block: clamp(2.75rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--lc-rule);
	background: var(--lc-colophon-bg);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
}

@media (prefers-color-scheme: dark) {
	.lc-colophon {
		--lc-colophon-bg: var(--lc-band);
	}
}

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

/*
 * The brand column takes the room it needs for a readable line; the rest size
 * to what is left.
 *
 * `auto-fit` rather than a fixed count, because the number of columns is not
 * fixed: Transparency renders only where there is a correction address to
 * offer, and each of the two nav columns disappears if its half of the menu is
 * empty. A `repeat(3, …)` track list would leave a hole the width of a column
 * down the right of the footer the moment any of them stood down.
 *
 * `minmax(0, 1.6fr)` rather than `1.6fr`, and that is not defensive habit:
 * `repeat(auto-fit, …)` is only valid in a track list whose other tracks are
 * `<fixed-size>`, and a bare `1.6fr` is not one. Written that way the whole
 * declaration is invalid, the grid falls back to the two-column rule above it,
 * and the footer silently renders at half its width on every desktop.
 */
@media (min-width: 720px) {
	.lc-colophon__inner {
		gap: 2.5rem 3rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	.lc-colophon__inner {
		grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
	}
}

/*
 * The name is the link, not the paragraph around it, so the flexbox that pairs
 * the mark with the wordmark has to be on the `<a>` — a flex container on the
 * `<p>` would make the link a single flex item and put the underline, the focus
 * ring and the pointer target around the mark *and* the word with no way to
 * hold them together.
 */
.lc-colophon__name {
	margin: 0 0 0.75rem;
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: -0.018em;
}

.lc-colophon__home {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--lc-fg);
	text-decoration: none;
}

/*
 * The footer mark is one colour where the masthead's is two.
 *
 * `.lc-mark__shield` already strokes itself from `--lc-accent`; the lens and the
 * grip take `currentColor`, which is the wordmark's white in the masthead. Here
 * `color` is moved onto the `<svg>` alone, so the whole drawing goes gold and
 * the word beside it stays white — the design reference's brand block, and one
 * declaration rather than a second copy of the mark.
 */
.lc-colophon__home .lc-mark {
	color: var(--lc-accent);
}

.lc-colophon__blurb {
	margin: 0;
	max-width: 34ch;
	line-height: 1.6;
}

/*
 * Two thirds of the homepage's credibility line. The third — "Corrections
 * accepted" — is the whole subject of the Transparency column, and stating it
 * twice in one footer makes that column read as a repeat.
 */
.lc-colophon__trust {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 1.5rem 0 0;
	color: var(--lc-fg-soft);
	font-weight: 600;
}

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

/*
 * The column headings are gold, which they could not have been before 1.6.0:
 * #af882c on the light band was 3.04:1 and 13px is not large text, so the
 * accent was unusable for a *word* there and these were quiet gray. On the navy
 * both schemes converge on the brand #c89b32 at 6.64:1.
 */
.lc-colophon__heading {
	margin: 0 0 1rem;
	color: var(--lc-accent);
	font-size: var(--lc-t-sm);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lc-colophon__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A register row: the label at the left edge of the column, the chevron at the
 * right. `justify-content: space-between` is what aligns the chevrons to one
 * axis down the column — sized to their own content they would sit wherever
 * each label happened to end, which is the ragged edge the reference does not
 * have.
 *
 * That makes the `<a>` a full-width box, so the hover underline moved onto
 * `.lc-colophon__label` inside it. Left on the link, a rule that used to run
 * exactly under the words would now run under the whole row and out past the
 * chevron. The span is supplied by `lc_theme_footer_nav()` through
 * `link_before`/`link_after`, which is also where the chevron comes from — one
 * place, so the two halves cannot come apart.
 *
 * The width cap is for the 720–992px layout, where two columns share the shell
 * and each is wide enough to strand a chevron 300px from its label. At the
 * desktop grid the column is already narrower than this and it does nothing.
 */
.lc-colophon__nav .lc-colophon__list {
	max-width: 20rem;
}

.lc-colophon__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.25rem;
	color: var(--lc-fg-soft);
	text-decoration: none;
	transition: color var(--lc-speed) ease;
}

.lc-colophon__label {
	border-bottom: 1px solid transparent;
	transition: border-color var(--lc-speed) ease;
}

.lc-colophon__list a:hover,
.lc-colophon__list a:focus-visible,
.lc-colophon__list .current-menu-item > a,
.lc-colophon__list .current_page_item > a {
	color: var(--lc-fg);
}

.lc-colophon__list a:hover .lc-colophon__label,
.lc-colophon__list a:focus-visible .lc-colophon__label,
.lc-colophon__list .current-menu-item > a .lc-colophon__label,
.lc-colophon__list .current_page_item > a .lc-colophon__label {
	border-bottom-color: var(--lc-accent);
}

/*
 * Gold, and 6.64:1 on this surface — but the bar it has to clear is nothing at
 * all: it is `aria-hidden`, it sits beside the wording it points at, and
 * `display: none` on the set would lose no information. Same test every other
 * drawing on this site passes.
 */
.lc-colophon__chevron {
	flex: 0 0 auto;
	color: var(--lc-accent);
	transition: transform var(--lc-speed) ease;
}

.lc-colophon__list a:hover .lc-colophon__chevron,
.lc-colophon__list a:focus-visible .lc-colophon__chevron {
	transform: translateX(2px);
}

/* The correction policy, which is a promise rather than a link list and reads
   as one. */
.lc-colophon__policy {
	margin: 0;
	max-width: 46ch;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

/*
 * The correction channel, under the promise that needs one.
 *
 * A worded link with a rule under it rather than a register row: the two nav
 * columns beside it are *lists of pages*, and a mailto in a list of pages reads
 * as one more page. Same treatment `.lc-more` gives the homepage's section
 * links, at footer scale — 1px rather than 2px, because the type here is 15px
 * and the rule under it should not out-weigh the word.
 *
 * `footer.php` renders the whole column only where `lc_theme_correction_email()`
 * answers an address, so this is never a promise with nothing under it.
 */
.lc-colophon__more {
	margin: 1.25rem 0 0;
	font-weight: 600;
}

.lc-colophon__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--lc-accent);
	color: var(--lc-fg);
	text-decoration: none;
	transition: color var(--lc-speed) ease;
}

.lc-colophon__more a:hover,
.lc-colophon__more a:focus-visible {
	color: var(--lc-accent);
}

.lc-colophon__more-chevron {
	flex: 0 0 auto;
	transition: transform var(--lc-speed) ease;
}

.lc-colophon__more a:hover .lc-colophon__more-chevron,
.lc-colophon__more a:focus-visible .lc-colophon__more-chevron {
	transform: translateX(3px);
}

/* The base line: the integrity statement and the copyright, separated from the
   columns above by a rule so neither reads as part of a nav list. */
.lc-colophon__base {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-rule);
}

/*
 * `align-items: center` rather than the `baseline` this was: the statement
 * carries a mark now, and a baseline row aligns the `<svg>`'s bottom edge with
 * the text baseline, which hangs it two pixels low against every line it sits
 * beside.
 */
.lc-colophon__integrity {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 32ch;
	margin: 0;
	max-width: 62ch;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	line-height: 1.55;
}

.lc-colophon__integrity-mark {
	flex: 0 0 auto;
	color: var(--lc-fg-quiet);
}

/*
 * The legal links and the copyright are one row at the right of the base line,
 * separated by hairlines rather than by punctuation.
 *
 * A `|` would be a text character in the accessible name of nothing, read aloud
 * as "vertical line" by some screen readers and inherited into the copy
 * somebody pastes out of the page. A 1px box drawn by `::before` is a picture:
 * it has no text, so nothing announces it and nothing copies it.
 */
.lc-colophon__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

/*
 * The heading is the nav landmark's accessible name — `lc_theme_footer_nav()`
 * points `aria-labelledby` at it — so it is hidden rather than dropped. Without
 * it the base line announces as an unnamed navigation region beside a named
 * one, which is worse than the visible "Legal" the reference does not have.
 *
 * `position: relative` here is what keeps that absolutely-positioned 1px box
 * resolving against this `<nav>` instead of the initial containing block. It is
 * the `.lc-sellers__scroll` trap: a 1px visually-hidden span with no positioned
 * ancestor once pushed `documentElement.scrollWidth` 41px past the viewport.
 */
.lc-colophon__nav--legal {
	position: relative;
}

.lc-colophon__nav--legal .lc-colophon__heading {
	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;
}

.lc-colophon__nav--legal .lc-colophon__list {
	max-width: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.25rem;
}

.lc-colophon__nav--legal .lc-colophon__list li {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.lc-colophon__copyright {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 0 1 auto;
	margin: 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	white-space: nowrap;
}

.lc-colophon__nav--legal .lc-colophon__list li + li::before,
.lc-colophon__copyright::before {
	width: 1px;
	height: 0.95em;
	background: var(--lc-rule-firm);
	content: "";
}

/*
 * Nowrap protects the copyright from breaking mid-line beside the integrity
 * text, but on a narrow screen it has its own line and a long site name would
 * overflow.
 *
 * The separator goes with it: a hairline is a *separator* only while there is
 * something to its left on the same line, and a stray 1px rule at the head of a
 * wrapped line reads as a rendering fault.
 */
@media (max-width: 560px) {
	.lc-colophon__copyright {
		white-space: normal;
	}

	.lc-colophon__copyright::before {
		display: none;
	}
}

/* ==========================================================================
   15b. Rail cards and commitment strips
   ========================================================================== */

/*
 * Two components the designed pages share, and they live here because they have
 * more than one caller.
 *
 * Both were written in `alerts.css` for `/alerts/` and both moved at 1.9.0 when
 * `/part-numbers/` grew the same furniture. That is the call 1.5.6 made about
 * `.lc-icon__knockout`: a component's parts belong with the component, not with
 * whichever page happened to need it first, because a rule reachable from one
 * template is a rule the second template silently does without.
 *
 * The one rule that did **not** move is `.lc-railcard__lookup .lc-lookup__*` in
 * `alerts.css`. It re-lays the plugin's lookup form and ties on specificity with
 * `lc-components.css` at (0,2,0), so it has to be declared in a sheet that loads
 * *after* that one — and this file loads before it.
 *
 * Neither component declares a colour scheme. Both are used inside `.lc-onpaper`
 * today, and both read semantic tokens throughout, so they are correct wherever
 * they are put.
 */

/*
 * A white strip between the navy hero and the light-gray register field, and
 * both of its boundaries are its own.
 *
 * The step above is navy to paper — 17:1, nothing to mark. 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-trustbar {
	margin: 0;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--lc-rule);
	background: var(--lc-bg);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.5;
}

/* A `<span>` carrying `.lc-shell` inside a `<p>`: the strip is full-bleed and
   its wording is not, so the gutter has to come from a box inside it. `flex` on
   an inline element is legal and computes the element to a block box. */
.lc-trustbar__inner {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

/*
 * `--lc-accent` on the shield: 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 *text* beside
 * it takes `--lc-fg-soft`, because a word answers 4.5:1 and the mark gold does
 * not — the three golds exist for exactly this split.
 */
.lc-trustbar__glyph {
	flex: 0 0 auto;
	color: var(--lc-accent);
}


/*
 * `--lc-invert-bg` / `--lc-invert-fg` for the header bar — the pair that means
 * "stand away from the page", which under `.lc-onpaper` is deep navy carrying
 * white at 17:1. That is the reference's bar exactly.
 *
 * The semantic pair and not `--lc-ink` / `#ffffff`, even though the page is
 * pinned and the two now resolve to the same thing: a literal would be a second
 * decision about what "inverted" means, sitting one class away from the block
 * that already decides it, and it would be silently wrong the first time this
 * card is reused anywhere unpinned — `--lc-ink` on the dark scheme's #091525 is
 * 1.08:1 and the card appears to have lost its title bar.
 */
.lc-railcard {
	overflow: hidden;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
}

.lc-railcard__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.85rem 1.15rem;
	background: var(--lc-invert-bg);
	color: var(--lc-invert-fg);
	font-size: var(--lc-t-md);
	letter-spacing: -0.008em;
}

.lc-railcard__glyph {
	flex: 0 0 auto;
}

.lc-railcard__body {
	padding: 1.15rem;
}

.lc-railsteps {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lc-railstep;
}

.lc-railstep {
	display: grid;
	gap: 0.15rem 0.7rem;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	counter-increment: lc-railstep;
}

/*
 * A plain `counter()`, not `decimal-leading-zero`: these are four checks run in
 * order and the register beside them is a numbered list of nothing. Drawing both
 * as "01" would say they are the same kind of list.
 */
.lc-railstep::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: 50%;
	color: var(--lc-fg);
	font-size: var(--lc-t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	grid-area: 1 / 1 / 3 / 2;
	content: counter(lc-railstep);
}

.lc-railstep__title {
	font-size: var(--lc-t-ui);
	font-weight: 600;
	grid-column: 2;
}

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

/* A rail card that says something rather than listing steps. Its own parts live
   here rather than in the one page sheet using them today, for the reason at the
   head of this section. */
.lc-railcard__note {
	margin: 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

.lc-railcard__action {
	margin: 1rem 0 0;
}

/* The button fills the rail rather than sitting at its content width: a 22.5rem
   card with a 190px control floating in it reads as unfinished, and the target
   is the whole point of the card. */
.lc-railcard__action .lc-button {
	width: 100%;
}

/* ==========================================================================
   16. Page shell
   ========================================================================== */

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.lc-site-content {
	flex: 1 0 auto;
}

/* ==========================================================================
   17. Motion
   ========================================================================== */

/*
 * The whole motion budget for this site is: interactive elements acknowledge
 * the pointer, and a few marks draw themselves as you scroll past. A page
 * making fraud allegations should not feel like a product launch.
 *
 * **Nothing is hidden until JavaScript reveals it.** The theme carried a
 * `.lc-reveal` treatment until 1.5.0 that started whole section wrappers at
 * `opacity: 0` and faded them in from an IntersectionObserver, with an inline
 * head script and a 2.5-second failsafe timer guarding the case where the
 * script never arrived. All of that is gone: the content is visible on first
 * paint, there is no state in which it is not, and the failsafe has nothing
 * left to fail safe from.
 */

.lc-transition,
.lc-nav a,
.lc-button,
.lc-searchform__submit,
.lc-pagination .page-numbers,
.lc-register__title a,
.lc-colophon__list a,
.lc-more a {
	transition:
		color var(--lc-speed) ease,
		background-color var(--lc-speed) ease,
		border-color var(--lc-speed) ease,
		transform var(--lc-speed) ease;
}

/*
 * The controls the list above missed, and one of them is the lookup field —
 * which `home.css` calls "the product". Both its `:hover` (the button's whole
 * fill swaps) and its `:focus` (border and background both change) were
 * snapping.
 *
 * Deliberately no `transform` here. Everything in this list is either a field
 * someone is comparing a part number against character by character, or sits
 * directly beside one, and a control that shifts under the pointer is the wrong
 * kind of acknowledgement next to a value being read literally.
 */
.lc-lookup__input,
.lc-lookup__submit,
.lc-donate__link,
.lc-parts__item a,
.lc-case__link,
.lc-selfcheck__engine {
	transition:
		color var(--lc-speed) ease,
		background-color var(--lc-speed) ease,
		border-color var(--lc-speed) ease,
		box-shadow var(--lc-speed) ease;
}

.lc-more a {
	display: inline-block;
}

.lc-more a:hover,
.lc-more a:focus-visible {
	transform: translateX(3px);
}

html {
	scroll-behavior: smooth;
}

/*
 * The single guard that turns all of it off. Covers the hover transforms, the
 * mark, the smooth scroll, the scroll-driven rules on the homepage and anything
 * added later — including animation shipped by the core plugin, which this
 * theme does not control.
 *
 * It reaches `animation-*` and `transition-*` and nothing else, which is why
 * `.lc-toc` and the homepage's sticky method figure each carry their own
 * `position: static` override in this file and in `home.css`.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* ==========================================================================
   18. Print
   ========================================================================== */

/*
 * People print these pages. An alert is a document someone takes to their
 * finance department or their insurer, so the printed copy has to carry the
 * whole argument — including the sources, which are otherwise lost the moment
 * a link stops being clickable.
 */
@media print {
	.lc-masthead,
	.lc-navtoggle,
	.lc-nav,
	.lc-skip,
	.lc-hero__bg,
	.lc-toc,
	.lc-copy,
	.lc-filters,
	.lc-donate,
	.lc-support,
	.lc-pagination,
	.lc-searchform {
		display: none;
	}

	/*
	 * Bands that put white text on deep navy have to be un-inverted, or they
	 * print white on white — an invisible page rather than an ugly one. The
	 * tokens are re-pointed for the same reason they were re-pointed on screen:
	 * everything inside reads from them, so one block covers the lot.
	 */
	.lc-onimage,
	.lc-hero--image,
	.lc-pagehead--image,
	.lc-report-card,
	.lc-colophon {
		--lc-fg:        #000000;
		--lc-fg-soft:   #222222;
		--lc-fg-quiet:  #444444;
		--lc-bg:        #ffffff;
		--lc-band:      #ffffff;
		--lc-accent:       #000000;
		--lc-accent-text:  #000000;
		--lc-accent-solid: #ffffff;
		--lc-rule:      rgba(0, 0, 0, 0.3);
		--lc-rule-firm: rgba(0, 0, 0, 0.55);
		--lc-field-bg:  #ffffff;

		color: #000000;
		background: none !important;
		background-image: none !important;
		border: 1px solid rgba(0, 0, 0, 0.3);
	}

	.lc-pagehead--image::after {
		display: none;
	}

	/*
	 * On paper the footer keeps what a reader might need to act on the document
	 * — who published it, the correction policy, and the copyright line — and
	 * drops the site navigation, which is only useful to someone who can click.
	 */
	.lc-colophon__nav--pages,
	.lc-colophon__nav--guidance {
		display: none;
	}

	/*
	 * `border: 0` before the hairline, and it is not tidying.
	 *
	 * The colophon joined the un-inverting group above at 1.6.0 — it has to, or
	 * white ink on a navy that print drops is an invisible footer — and that
	 * group carries `border: 1px solid …` for the report card and the image page
	 * heads, which are boxes. The shorthand sets all four sides, and a lone
	 * `border-top` here overrides one of them: the footer would print inside a
	 * full rectangle. This resets the other three and puts the join back.
	 */
	.lc-colophon {
		background: none;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.3);
	}

	.lc-colophon__list a[href]::after {
		content: " <" attr(href) ">";
		font-family: var(--lc-mono);
		font-size: 0.85em;
		word-break: break-all;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	/*
	 * On paper there is exactly one column width and it is the paper's.
	 *
	 * `!important` because this block has to outrank whatever the screen
	 * decided, and both of these are one-class selectors that anything scoped
	 * beats. `.lc-main` is styled from `lc-components.css`, which loads *later*,
	 * so this reset had already been dead for the part and term pages before
	 * anything was scoped; the reading grid then did the same to `.lc-shell`
	 * with `.lc-page .lc-shell`. Neither was visible — a 44rem measure on a
	 * 210mm page is under the paper width either way — which is exactly why it
	 * needs pinning rather than watching.
	 */
	.lc-shell,
	.lc-main {
		max-width: none !important;
		padding-inline: 0 !important;
	}

	/* An alert's two-column layout collapses: the contents list is gone and the
	   article takes the page. */
	.lc-alert__layout {
		display: block;
	}

	/*
	 * `.lc-signs` is listed by name and it is not redundant. It declares its own
	 * fill in `home.css`, which is one class against this rule's one class *and*
	 * loads afterwards — so the band would keep its light-gray field on paper
	 * while every other band lost one. Invisible in practice, because a print
	 * dialog omits backgrounds unless the reader ticks "Background graphics",
	 * and wrong for exactly the reader who ticks it.
	 */
	.lc-sec,
	.lc-sec--band,
	.lc-signs {
		padding-block: 1rem;
		background: none;
	}

	/* The source is the point. On paper the href has to be visible. */
	.lc-fact__source a[href^="http"]::after,
	.lc-domain-check__source a[href^="http"]::after,
	.lc-body a[href^="http"]::after,
	.lc-term__archive a[href^="http"]::after {
		content: " <" attr(href) ">";
		font-family: var(--lc-mono);
		font-size: 0.85em;
		word-break: break-all;
	}

	/* `.lc-sign` replaces `.lc-signs__item`, which never existed: the homepage
	   band's rows were the plugin's `.lc-flag` until 1.5.8 and are the theme's
	   own `.lc-sign` now. `.lc-flag` stays — it is still what `/warning-signs/`,
	   an alert and a part-number archive render. */
	.lc-fact,
	.lc-banner,
	.lc-flag,
	.lc-register__item,
	.lc-selfcheck__step,
	.lc-sign,
	.lc-step {
		break-inside: avoid;
	}

	.lc-pagehead--image {
		background-image: none;
	}
}