/**
 * The part-number index.
 *
 * Loaded only for `template-part-index.php` — the arrangement `home.css`,
 * `warning-signs.css` and `alerts.css` all have.
 *
 * **Its dependency is the component sheet, like the others', and here that is a
 * precaution rather than a fix.** Nothing in this file re-lays the plugin's
 * lookup inside a narrow box, so nothing ties on specificity today: the hero's
 * lookup is full width and takes the component sheet's own rules unchanged.
 * Declaring the dependency anyway keeps every page sheet in one order, so the
 * first rule here that *does* need to out-order `lc-components.css` works
 * instead of silently not — which is the failure `.lc-main` and the
 * `lc_languages` filter both took.
 *
 * **Everything below the hero is paper in both colour schemes, and not one
 * declaration in this file says so.** The template carries `.lc-onpaper` on its
 * `<main>` and `.lc-onimage` on the hero inside it; both are token re-points in
 * `style.css`, and a custom property declared on a nearer ancestor wins for its
 * own subtree. Every rule here names a semantic token, so the page comes out
 * navy-then-paper in either scheme with no `@media (prefers-color-scheme)`
 * anywhere.
 *
 * **The commitment strip and the two rail cards are not styled here.**
 * `.lc-trustbar`, `.lc-railcard` and `.lc-railstep` moved to section 15b of
 * `style.css` at 1.9.0, when this page became their second caller. See the note
 * at the head of that section.
 *
 * @package LieferantenCheck
 */

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

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

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

/*
 * Two numbers, declared on `.lc-idxhero` rather than on the `--image` modifier,
 * so the grid rule below can never resolve `--lc-idx-split` to nothing: an
 * unresolved `var()` is invalid at computed-value time and would drop the whole
 * `grid-template-columns` declaration rather than fall back to the one-column
 * rule above it.
 *
 * The same derivation the other three heroes use, restated because none of their
 * sheets is loaded here and a custom property cannot be inherited from a
 * stylesheet that is not present. Section 18 pins this copy to the same *shape*.
 */
.lc-idxhero {
	--lc-idx-gap: 2.5rem;
	--lc-idx-split: calc(4 / 7);

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

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

/*
 * `brightness(0.68)`, read off this photograph rather than copied from another
 * hero. `Industrielle Armaturen` is a close-up of valves — mid-tone, with
 * specular hits on the metal that a lighter setting would let through as blown
 * highlights beside the headline. Nothing is read on top of it at any width, so
 * this is not a contrast argument in either direction.
 */
.lc-idxhero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	filter: grayscale(1) brightness(0.68) contrast(1.05);
}

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

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

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

/*
 * `--lc-t-2xl`, like the register's, and for the same reason: this is an index,
 * not a landing page, and the reference sets its title at about two thirds the
 * homepage's. It also carries "Search documented part numbers" on one line in a
 * 780px column at 42px, which 64px does not.
 */
.lc-idxhero__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--lc-t-2xl);
	font-weight: 700;
	letter-spacing: -0.026em;
	line-height: 1.08;
	text-wrap: balance;
}

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

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

/*
 * The label is visually hidden **here and nowhere else**, and it is the one
 * departure from the site's standing position that a placeholder is not a label.
 *
 * It is not hidden from assistive technology: the `<label>` is still in the
 * markup, still bound to the field, still the field's accessible name. What is
 * removed is the *visible* uppercase line, because the H1 directly above it
 * reads "Search documented part numbers" and the field's own placeholder gives
 * the example — so the visible label would be the third statement of one idea
 * inside 120px of vertical space. On `/check/` and in a rail there is no
 * headline saying it, and the label stays visible there.
 */
.lc-idxhero__lookup .lc-lookup__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lc-idxhero__lookup .lc-lookup {
	margin: 0;
}

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

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

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

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

/* ==========================================================================
   3. The index
   ========================================================================== */

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

/*
 * 76rem is the split every designed page here takes. Above it the rail is
 * 22.5rem — 360px, the width the reference draws these cards at.
 *
 * `align-items: start` is what lets the rail sit level with the heading while
 * being *after* the list in the DOM, which is the order a phone wants: the codes
 * first, then the advice about them.
 */
.lc-index__grid {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

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

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

.lc-index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1rem;
}

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

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

/*
 * The count is the number of documented codes the register holds, and it does
 * **not** change when a letter tab narrows the list. That is deliberate: the
 * tabs are a way of walking one index, not a search, and a heading that read "1
 * documented part number" under a letter would say the register holds one.
 */
.lc-index__count {
	margin: 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-ui);
	white-space: nowrap;
}

/* ---- The letter tabs and the sort control ------------------------------ */

/*
 * The two sit on one row where there is space and stack where there is not, and
 * the row is an explicit flex parent rather than two `inline-flex` siblings.
 *
 * Siblings was the first shape and it was quietly wrong: `.lc-idxsort` is
 * declared `display: flex` further down this file, which reset the
 * `inline-flex` the media query had given it and dropped the select to its own
 * line at every width — a rule losing to *itself* on source order, invisible
 * except in a screenshot. A parent that owns the layout cannot be undone from
 * below.
 *
 * `space-between` so the sort control sits at the far end of the row, which is
 * what the reference draws; `wrap` so it goes under the tabs rather than
 * squashing them when the alphabet grows.
 */
.lc-index__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.lc-alpha__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0.25rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	list-style: none;
}

/*
 * A tab is a link, and every one of them has to clear the 44px minimum target —
 * `min-height` and not padding arithmetic, because the arithmetic was wrong.
 *
 * The first version reasoned "0.5rem of block padding around 15px text is 46px"
 * and shipped at **41px**, measured through the iframe sweep at every width from
 * 360 up: 16px of padding plus a 24px line box is 40, not 46. A minimum target
 * is the one number on a control that must not be inferred, and the sweep is
 * what turned a plausible sentence into a measurement.
 *
 * 2.75rem is the same floor `.lc-lookup__submit` takes. `min-width` keeps a
 * one-character tab square rather than a sliver.
 */
.lc-alpha__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.65rem;
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	text-decoration: none;
}

.lc-alpha__tab:hover,
.lc-alpha__tab:focus-visible {
	background: var(--lc-band);
	color: var(--lc-fg);
}

/*
 * The selected tab is chosen by `[aria-current]` and not by a class, so the
 * thing the stylesheet paints and the thing a screen reader announces cannot
 * disagree — there is only one of them. Colour is not the only carrier either:
 * `aria-current` is the statement, and the fill is how it looks.
 *
 * `--lc-invert-*` rather than a literal navy, so the pair is correct wherever
 * this control is put. 17:1 under the pin.
 */
.lc-alpha__tab[aria-current] {
	background: var(--lc-invert-bg);
	color: var(--lc-invert-fg);
}

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

/*
 * The UA's own arrow is kept. Replacing it means `appearance: none` plus a
 * background image, and a background image cannot follow `currentColor` — which
 * is the whole reason the icon pack is inlined. `color-scheme: light` from the
 * pin is what makes the UA draw a light control here rather than a dark one.
 */
.lc-idxsort__select {
	min-width: 0;
	max-width: 100%;
	padding: 0.7rem 0.85rem;
	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);
}

/* Only the height is taken off the shared button; everything else is
   `.lc-button--ghost`'s. */
.lc-idxsort__submit {
	min-height: 0;
	padding-block: 0.7rem;
}

/* ---- A code ------------------------------------------------------------ */

.lc-codes {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `--lc-bg` on `--lc-band` with a `--lc-rule` edge — the pairing every card on
 * this site uses.
 *
 * The left rule is the strongest status among the alerts naming the code, and it
 * is not the only carrier of that: the badge in the row states it in words, so
 * `border-left-color` could be dropped entirely and nothing would be lost. 3px
 * rather than 1, because an edge this short has to be seen from the far side of
 * a 900px card.
 */
.lc-code {
	display: grid;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--lc-rule);
	border-left: 3px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/*
 * One rule per status, each naming the *ink* of its own badge. Four values that
 * must stay related to four badges are one edit away from not being — the
 * argument `--lc-st-review-fg` already makes for pointing at `--lc-caution-text`
 * instead of restating #7f6220.
 */
.lc-code--reported {
	border-left-color: var(--lc-st-reported-fg);
}

.lc-code--review {
	border-left-color: var(--lc-st-review-fg);
}

.lc-code--evidenced {
	border-left-color: var(--lc-st-evidenced-fg);
}

.lc-code--corrected {
	border-left-color: var(--lc-st-corrected-fg);
}

/*
 * The code itself, and it is the loudest thing in the row because it is the one
 * thing the reader arrived to match.
 *
 * `--lc-fg` and not the gold the reference draws it in. `--lc-accent-text` is
 * 5.72:1 and would clear AA, but at `--lc-t-lg` in a monospace face against a
 * badge, a count and a domain also competing for the eye, the register's own ink
 * at 17:1 is what makes a column of codes scannable — and gold is this site's
 * mark for *caution*, which a part number is not. `.lc-atom` carries the
 * monospace and the tracking.
 *
 * `overflow-wrap` because a code is one unbroken token and would otherwise set
 * the width of the card.
 */
.lc-code__id {
	margin: 0;
	color: var(--lc-fg);
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
}

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

.lc-code__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.lc-code__count {
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 600;
}

/*
 * The term description, where an editor has set one. Every code in the register
 * has an empty description today, so this renders on no row — which is the
 * honest state rather than a missing feature, and is why the renderer skips the
 * element entirely instead of leaving an empty paragraph behind.
 */
.lc-code__note {
	margin: 0.45rem 0 0;
	max-width: var(--lc-measure);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

.lc-code__domains,
.lc-code__tactics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The domains are text, not links, and the stylesheet is not what enforces that
 * — the renderer is. What this does is keep them looking like the data they are:
 * `.lc-atom`'s monospace, quiet ink, and no affordance suggesting a click.
 */
.lc-code__domain {
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	overflow-wrap: anywhere;
}

/*
 * `--lc-danger` for both the ink and the edge — #a12e32 on paper is 7.11:1 as
 * text and clears 1.4.11 as a boundary from the same value. Outlined rather than
 * filled, so a row of them under a badge does not read as four more badges.
 * Identical to `.lc-entry__tactic` on the register page by intent; not shared,
 * because the two sheets never load together and a component with one caller
 * per page is not yet a component.
 */
.lc-code__tactic {
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--lc-danger);
	border-radius: var(--lc-radius);
	color: var(--lc-danger);
	font-size: var(--lc-t-xs);
	line-height: 1.6;
}

.lc-code__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin: 0.75rem 0 0;
}

.lc-code__checked {
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

/*
 * `margin-left: auto` so the control stays at the far end when the re-check date
 * is absent — `justify-content: space-between` puts a lone child at the *start*,
 * which would move the one control on the card to the left on exactly the rows
 * that have the least in them.
 */
.lc-code__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
	font-size: var(--lc-t-ui);
	font-weight: 600;
}

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

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

/*
 * The code moves into a column of its own once there is room, which is what the
 * reference draws. 11rem is measured rather than picked: `AP45-CIE91` is 10
 * characters and the site's monospace draws it at 118px at `--lc-t-lg`, so the
 * track holds the register's longest code today with room for two more
 * characters before it wraps — and it wraps rather than overflowing, which is
 * what `overflow-wrap` above is for.
 */
@media (min-width: 40rem) {
	.lc-code {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}

.lc-index__main .lc-empty {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
}

/* ==========================================================================
   4. The rail
   ========================================================================== */

.lc-index__rail {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

/*
 * Sticky only where there is a column for it, and it clears the masthead by the
 * token three other things already clear it by.
 *
 * On the rail and not on each card: two sticky siblings inside one grid item
 * stop at the same offset and overlap as the page scrolls.
 *
 * The reduced-motion block in `style.css` reaches `animation-*` and
 * `transition-*` and nothing else, so `position` has to be stood down by name —
 * the same override `.lc-toc`, the homepage's method figure, `.lc-beforepay` and
 * `.lc-registry__rail` each carry.
 */
@media (min-width: 76rem) {
	.lc-index__rail {
		position: sticky;
		top: calc(var(--lc-head-h) + 1rem);
	}
}

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

/* ==========================================================================
   5. Print
   ========================================================================== */

/*
 * These live here rather than in `style.css` section 18, and that is not filing
 * — it is specificity. This sheet loads **after** `style.css`, so a `background`
 * declared here for a band ties with the print reset there on one class and wins
 * on source order. `.lc-signs` is named in that block for exactly this reason.
 *
 * `.lc-trustbar` and `.lc-railcard` are **not** listed: they are declared in
 * `style.css` now, so section 18's own reset reaches them without help.
 */
@media print {
	.lc-idxhero,
	.lc-index,
	.lc-code,
	.lc-alpha__list {
		padding-block: 0.5rem;
		background: none !important;
	}

	.lc-idxhero__bg {
		display: none;
	}

	/* The controls go: a lookup, a letter filter and a sort select are things
	   only somebody who can click has any use for. The index is the document. */
	.lc-idxhero__lookup,
	.lc-alpha,
	.lc-idxsort {
		display: none;
	}

	.lc-index__grid,
	.lc-code {
		display: block;
	}

	.lc-code {
		margin-bottom: 0.4rem;
		border: 1px solid rgba(0, 0, 0, 0.3);
		break-inside: avoid;
	}

	/* The record's own URL, because a link that cannot be clicked is a reference
	   that has to be readable. The same treatment the sources on an alert get. */
	.lc-code__more[href]::after {
		content: " <" attr(href) ">";
		font-family: var(--lc-mono);
		font-size: 0.85em;
		font-weight: 400;
		word-break: break-all;
	}

	.lc-railcard {
		break-inside: avoid;
	}
}