/**
 * The supplier domain index.
 *
 * Loaded only for `template-domain-index.php` — the arrangement `home.css`,
 * `warning-signs.css`, `alerts.css` and `part-index.css` all have, and for the
 * same reason: three bands' worth of rules that exactly one URL can reach do not
 * belong in a stylesheet every visitor downloads.
 *
 * **Its dependency is the component sheet, like the others', and here that is a
 * precaution rather than a fix.** The rail's lookup is re-laid by
 * `.lc-railcard__lookup` in `lc-components.css` itself since 1.12.0, so nothing
 * in this file has to out-order that sheet today. Declaring the dependency
 * anyway keeps all five page sheets in one order, so the first rule here that
 * *does* need it 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 — which is the point, because a media query is a branch the light
 * side silently depends on being written correctly. Section 20 of
 * `tools/test-theme-contrast.php` measures every pair through the pin and fails
 * if a scheme branch appears here.
 *
 * **The commitment strip and the two rail cards are not styled here.**
 * `.lc-trustbar`, `.lc-railcard`, `.lc-railsteps` and `.lc-railstep` are section
 * 15b of `style.css`; `.lc-railcard__lookup` is `lc-components.css`. This page
 * is their third caller and adds nothing to any of them.
 *
 * **Nor is the hero shared, and that is deliberate.** `.lc-domhero` restates the
 * same four-term plate derivation `.lc-hero`, `.lc-reghero` and `.lc-idxhero`
 * each carry, because none of their sheets is loaded here and a custom property
 * cannot be inherited from a stylesheet that is not present. Section 20 pins the
 * *shape* of the derivation rather than its value, which is what section 10 does
 * for the homepage and section 18 for the part index.
 *
 * @package LieferantenCheck
 */

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

/*
 * The page grid, not the reading grid. `style.css` narrows `.lc-page`,
 * `.lc-single`, `.lc-archive` and `.lc-404`; this page is bands with a rail and
 * wants the full shell, like `.lc-home`, `.lc-guide`, `.lc-register-page` and
 * `.lc-index-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-domindex-page {
	display: block;
}

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

/*
 * Two numbers, declared on `.lc-domhero` rather than on the `--image` modifier,
 * so the grid rule below can never resolve `--lc-dom-split` to nothing: an
 * unresolved `var()` is invalid at computed-value time and would drop the whole
 * `grid-template-columns` declaration rather than fall back to the one-column
 * rule above it.
 */
.lc-domhero {
	--lc-dom-gap: 2.5rem;
	--lc-dom-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-domhero__bg {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

/*
 * `brightness(0.72)`, **measured off the rendered plate** rather than copied
 * from another hero or reasoned about.
 *
 * `Containerterminal` is an aerial of stacked containers whose cream tops are
 * large flat light areas — nothing like `Industrieanlage`'s specular metal,
 * which is why 0.58 would be far too dark here, and nothing like `Betonwand`'s
 * even concrete at 0.86. Sampled out of the PNG at 1440 the plate comes back at
 * a mean relative luminance of 0.039 with a brightest pixel at 0.200, which is
 * the band the homepage's plate was settled at (0.040 mean, 0.173 brightest)
 * against a design reference at 0.030. 0.62 was the first value and put the mean
 * at 0.021 with nothing in the frame legible as a photograph.
 *
 * Nothing is read on top of it at any width, so this is not a contrast argument
 * in either direction; it is about a backdrop that reads as a picture without
 * competing with the headline beside it.
 */
.lc-domhero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
	filter: grayscale(1) brightness(0.72) contrast(1.05);
}

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

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

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

/*
 * `--lc-t-2xl`, like the register's and the part index'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 carries "Search documented domains" on
 * one line in a 780px column at 42px, which 64px does not.
 */
.lc-domhero__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-domhero__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-domhero__lookup {
	max-width: 34rem;
	margin-top: 1.35rem;
}

/*
 * The label is visually hidden **in this hero and in the part index's**, 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 domains" 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. In the rail below there is no headline saying it, and
 * the label stays visible there.
 */
.lc-domhero__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-domhero__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-domhero` sets no inline padding,
 * so that is the viewport — while the grid's own `100%` is its content box.
 * `--lc-dom-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-domhero__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-dom-gap))
				* var(--lc-dom-split)
			+ var(--lc-dom-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-domhero__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-dom-split`, so the reservation cannot fall out of step
	 * with the thing it reserves.
	 */
	.lc-domhero__grid {
		grid-template-columns:
			calc((100% - var(--lc-dom-gap)) * var(--lc-dom-split))
			minmax(0, 1fr);
	}

	.lc-domhero__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` and `.lc-index` use and the reference draws: white
 * cards on a light field. At 1.081:1 the step is a mood rather than a boundary,
 * so each card also declares a `--lc-rule` edge and the two together make a
 * column of rows read as a column of objects.
 */
.lc-domindex {
	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
 * domains first, then the method.
 */
.lc-domindex__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-domindex__grid {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
	}
}

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

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

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

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

/*
 * The count is the number of documented domains the register holds, and it does
 * **not** change when a status 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
 * domain record" under a tab would say the register holds one.
 */
.lc-domindex__count {
	margin: 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-ui);
	white-space: nowrap;
}

/* ---- The status 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 on the part index and it was quietly wrong: the
 * sort form is declared `display: flex` further down, which reset the
 * `inline-flex` a 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 register grows a third and fourth status.
 */
.lc-domindex__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.lc-domtabs__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 on
 * the part index and shipped three pixels short at every width: 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.
 *
 * 2.75rem is the same floor `.lc-lookup__submit` takes. No `min-width` here,
 * unlike the part index's letter tabs — these are words rather than single
 * characters and are never a sliver.
 */
.lc-domtabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 0.85rem;
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	text-decoration: none;
}

.lc-domtabs__tab:hover,
.lc-domtabs__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-domtabs__tab[aria-current] {
	background: var(--lc-invert-bg);
	color: var(--lc-invert-fg);
}

.lc-domsort {
	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-domsort__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-domsort__submit {
	min-height: 0;
	padding-block: 0.7rem;
}

/* ---- A domain ---------------------------------------------------------- */

.lc-doms {
	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 domain, 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-dom {
	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-dom--reported {
	border-left-color: var(--lc-st-reported-fg);
}

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

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

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

/*
 * The domain itself, and it is the loudest thing in the row because it is the
 * one thing the reader arrived to match — a lookalike is a lookalike by one
 * character.
 *
 * `--lc-fg` and not the gold the reference draws it in. `--lc-accent-text` is
 * 5.72:1 and would clear AA, so this is not a contrast argument: gold is this
 * site's mark for *caution*, and a domain name is a string rather than a
 * warning. `.lc-atom` carries the monospace and the tracking.
 *
 * `--lc-t-md` and not the part index's `--lc-t-lg`: a part code is ten
 * characters and a domain is twenty-three, and the larger step would put the
 * register's longest name past its own track at every width.
 *
 * `overflow-wrap` because a domain is one unbroken token and would otherwise set
 * the width of the card.
 */
.lc-dom__name {
	margin: 0;
	color: var(--lc-fg);
	font-size: var(--lc-t-md);
	font-weight: 700;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
}

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

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

/*
 * The role the register filed this domain under, beside the badge rather than
 * among the findings below — and quiet slate rather than the findings' red,
 * because it is a *classification* and they are readings of a public record.
 * "Bait supplier" is what an editor filed; "Registered for the minimum term
 * only" is what the registry says. One colour for both would make the first look
 * like it came out of the second.
 *
 * `--lc-fg-soft` for the ink *and* the edge: 5.74:1 on paper as a word, and the
 * same value clears 1.4.11's 3:1 as a boundary. `--lc-rule-firm` would be under
 * 2:1 — that is what a card edge uses next to a card fill, not what a chip
 * outline uses as its only shape. Both measured by section 20.
 */
.lc-dom__role {
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--lc-fg-soft);
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-xs);
	line-height: 1.6;
}

/*
 * The strongest finding the public record holds about this domain, in the
 * plugin's own words. It is the one sentence on the row, so it takes the
 * register's ink at full weight; everything under it is supporting detail.
 */
.lc-dom__finding {
	margin: 0.5rem 0 0;
	max-width: var(--lc-measure);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	line-height: 1.5;
}

/*
 * The term description, where an editor has set one. Every domain 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-dom__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-dom__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	margin: 0.45rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

/*
 * The separator the reference draws between the facts, as a **border and not a
 * `::before`**. Generated text is read out by some screen readers, cannot be
 * selected with the sentence it divides, and is dropped by find-in-page — for a
 * pipe between three independent readings that is three costs for no gain. A
 * border is the same mark with none of them, and it survives a print with
 * backgrounds switched off.
 *
 * **Trailing and not leading**, which is the one thing about it that was
 * decided by looking. The row wraps below about 46rem, and a border on
 * `.lc-dom__fact + .lc-dom__fact` puts the mark at the *start* of the wrapped
 * line, hard against the card's padding with nothing to its left — a stray tick.
 * On the last item of a line it reads as "this continues", which is what it
 * means. `:not(:last-child)` because there is no item after the last one on
 * either reading.
 */
.lc-dom__fact:not(:last-child) {
	padding-right: 0.75rem;
	border-right: 1px solid var(--lc-rule);
}

.lc-dom__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * `--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 three more badges.
 * Identical to `.lc-entry__tactic` and `.lc-code__tactic` by intent; not shared,
 * because no two of the three sheets ever load together and a component with one
 * caller per page is not yet a component.
 */
.lc-dom__flag {
	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-dom__registrar {
	margin: 0.6rem 0 0;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	overflow-wrap: anywhere;
}

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

.lc-dom__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. `sample.com` is that row today.
 */
.lc-dom__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
	font-size: var(--lc-t-ui);
	font-weight: 600;
}

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

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

/*
 * The domain moves into a column of its own once there is room, which is what
 * the reference draws. 16rem is measured rather than picked: the register's
 * longest name is `apexpumpengineering.com` at 23 characters, and the site's
 * monospace draws it at **247px** at `--lc-t-md` — measured through the iframe
 * sweep — so the 256px track holds it on one line with nine pixels to spare, and
 * anything longer wraps rather than overflowing, which is what
 * `overflow-wrap: anywhere` above is for. It does wrap at 320, where the card is
 * one column and the track is 219px; that is the fallback working.
 *
 * 46rem and not the part index's 40rem, because the track is 16rem here rather
 * than 11: at 640px a 256px column would leave under 300px for a body carrying a
 * sentence, three facts and three chips.
 */
@media (min-width: 46rem) {
	.lc-dom {
		grid-template-columns: 16rem minmax(0, 1fr);
	}
}

.lc-domindex__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-domindex__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 four other things already clear it by. This is the one thing the rail's
 * copy of the lookup is *for*: four screens into a long index the hero's box has
 * scrolled away and this one has not.
 *
 * 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`,
 * `.lc-registry__rail` and `.lc-index__rail` each carry.
 */
@media (min-width: 76rem) {
	.lc-domindex__rail {
		position: sticky;
		top: calc(var(--lc-head-h) + 1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-domindex__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`, so section 18's own reset reaches them without help.
 */
@media print {
	.lc-domhero,
	.lc-domindex,
	.lc-dom,
	.lc-domtabs__list {
		padding-block: 0.5rem;
		background: none !important;
	}

	.lc-domhero__bg {
		display: none;
	}

	/*
	 * The controls go: a lookup, a status filter and a sort select are things
	 * only somebody who can click has any use for. The index is the document.
	 * `.lc-railcard__lookup` is the rail's copy of the same box, hidden here for
	 * the same reason `alerts.css` hides it.
	 */
	.lc-domhero__lookup,
	.lc-domtabs,
	.lc-domsort,
	.lc-railcard__lookup {
		display: none;
	}

	.lc-domindex__grid,
	.lc-dom {
		display: block;
	}

	.lc-dom {
		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-dom__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;
	}
}