/**
 * The report page.
 *
 * Loaded only for `template-report.php` — the arrangement `home.css`,
 * `warning-signs.css`, `alerts.css`, `part-index.css` and `domain-index.css` all
 * have.
 *
 * **Its dependency is the component sheet, like every other page sheet's, and
 * here that is a fix rather than a precaution.** Nine rules below re-lay blocks
 * `lc-components.css` section 13 already styles — `.lc-report`, its labels, its
 * privacy note, its status lines — and most of them tie with it on specificity.
 * Declared against `lieferantencheck-theme` the way `home.css` is, this sheet
 * could be printed *before* the component sheet, lose every one of those ties on
 * source order, and leave the form looking exactly as it did before: a rule in
 * plain sight doing nothing, which is the shape `.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 pin carries `color-scheme: light` with it, which is what stops a
 * UA painting a dark file picker or a dark spellcheck underline inside a white
 * card — this page has eight native controls on it and is the first designed
 * page where that clause is load-bearing rather than tidy.
 *
 * **Nothing here may hide, empty or reword a plugin element.** The form is
 * `LC_Report::render_form()`'s markup moved into wrappers by
 * `lc_theme_report_cards()`; this sheet decides how it looks and never what it
 * says. Section 21 of `tools/test-theme-contrast.php` sweeps the file for a
 * `display: none` or a `content:` on any `.lc-report*` selector and fails on
 * either — the same guard section 19 puts on `alert.css`.
 *
 * **The commitment strip and the three rail cards are not styled here.**
 * `.lc-trustbar`, `.lc-railcard`, `.lc-railsteps` and `.lc-railstep` live in
 * section 15b of `style.css`; this is their fourth caller.
 *
 * @package LieferantenCheck
 */

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

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

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

/*
 * Two numbers, declared on `.lc-rephero` rather than on the `--image` modifier,
 * so the grid rule below can never resolve `--lc-rep-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 four 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 21 pins this copy to the same *shape*.
 */
.lc-rephero {
	--lc-rep-gap: 2.5rem;
	--lc-rep-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, the lede and the three
 * assurances 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-rephero__bg {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

/*
 * `brightness(0.68)`, the value `part-index.css` settled on for this same
 * photograph rather than a second reading of it. `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; it is the same picture treated the same way on both pages that
 * carry it.
 */
.lc-rephero__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-rephero--image {
	position: relative;
}

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

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

/*
 * `--lc-t-2xl`, like the register's and both indexes', and for the same reason:
 * this is a page somebody arrives at to do something, not a landing page, and
 * the reference sets its title at about two thirds the homepage's.
 */
.lc-rephero__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-rephero__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 three assurances --------------------------------------------- */

/*
 * A wrapping row rather than a three-column grid. The three labels are one, two
 * and three words in English and rather longer in German — "Nothing published
 * automatically" is "Nichts wird automatisch veröffentlicht" — so equal tracks
 * would size every column to the longest translation and leave the first two
 * mostly empty. Wrapping puts as many on a line as fit, in either language.
 */
.lc-repassure {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2.25rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.lc-repassure__item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	max-width: 22ch;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	line-height: 1.35;
}

/*
 * `--lc-fg` on the glyph and not `--lc-accent`. On the hero the two are 17.0:1
 * and 6.6:1 against the ink, both far past the 3:1 a mark needs — so the choice
 * is composition rather than contrast, and three gold marks in a row directly
 * under a gold eyebrow would make the eyebrow stop reading as the section mark.
 * The gold on this page is spent on the eyebrow and on the one button that
 * matters.
 */
.lc-repassure__glyph {
	flex: 0 0 auto;
	color: var(--lc-fg);
}

/*
 * 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-rephero` sets no inline padding,
 * so that is the viewport — while the grid's own `100%` is its content box.
 * `--lc-rep-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-rephero__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-rep-gap))
				* var(--lc-rep-split)
			+ var(--lc-rep-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-rephero__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 assurances can never run under the photograph
	 * however long a translation turns out to be — and the plate places itself
	 * from the same `--lc-rep-split`, so the reservation cannot fall out of step
	 * with the thing it reserves.
	 */
	.lc-rephero__grid {
		grid-template-columns:
			calc((100% - var(--lc-rep-gap)) * var(--lc-rep-split))
			minmax(0, 1fr);
	}

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

/* ==========================================================================
   3. The form band
   ========================================================================== */

/*
 * The field the cards sit on, which is `--lc-band` and not paper — the same
 * relationship both indexes and the register 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 cards read as a column of objects.
 */
.lc-repform {
	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 first card while
 * being *after* the form in the DOM, which is the order a phone wants: the
 * fields first, then the notes about them.
 */
.lc-repform__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-repform__grid {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
	}
}

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

/* ==========================================================================
   4. The step nav
   ========================================================================== */

/*
 * Three in-page links, and **not a wizard**. The reference draws a stepper with
 * step one filled; all three parts of this form are on screen at once, so a
 * filled numeral would be a control claiming a state the page does not have.
 * There is no `aria-current` in the markup and no `[aria-current]` rule here.
 */
.lc-repsteps {
	margin: 0 0 1.25rem;
}

.lc-repsteps__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lc-repstep;
}

.lc-repsteps__item {
	display: flex;
	align-items: center;
	counter-increment: lc-repstep;
}

/*
 * The whole step is the target, numeral included — a numeral outside it is a
 * click that lands on nothing in the 2.4rem it occupies, which on a phone is a
 * fifth of the row.
 *
 * 2.75rem is the 44px minimum, and it is `min-height` rather than padding
 * arithmetic for the reason `.lc-alpha__tab` records: "0.5rem of block padding
 * around 15px text is 46px" shipped at 41.
 */
.lc-repsteps__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.35rem 0.5rem;
	border-radius: var(--lc-radius);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	text-decoration: none;
}

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

/*
 * The numeral is a CSS counter in an empty `aria-hidden` span, the pattern
 * `.lc-check__num` and `.lc-railstep::before` both use: a number inside the link
 * text becomes part of that link's accessible name, and a number handed in as
 * data is one that can disagree with the card it points at. The standing rule
 * on this site is that a *number* may be generated and a *sentence* may not.
 */
.lc-repsteps__num {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lc-rule-firm);
	border-radius: 50%;
	background: var(--lc-bg);
	color: var(--lc-fg);
	font-size: var(--lc-t-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lc-repsteps__num::before {
	content: counter(lc-repstep);
}

/*
 * The connector, and it arrives with the room for it. Below 46rem the three
 * steps wrap onto two or three lines, where a rule stretching to the end of a
 * line joins a step to nothing.
 *
 * A `::after` on the item rather than a border on the link: it is a decorative
 * rule and not a word, which is the same line `.lc-dom__facts` draws — generated
 * *text* is read out by some screen readers and dropped by find-in-page, and a
 * generated *rule* is neither.
 */
@media (min-width: 46rem) {
	.lc-repsteps__item {
		flex: 1 1 auto;
	}

	.lc-repsteps__item:not(:last-child)::after {
		height: 1px;
		flex: 1 1 1.5rem;
		min-width: 1rem;
		margin-inline: 0.5rem;
		background: var(--lc-rule-firm);
		content: "";
	}
}

/* ==========================================================================
   5. The form, as three cards
   ========================================================================== */

/*
 * `lc-components.css` caps `.lc-report` at `--lc-measure` (44rem), which is the
 * right answer for a form printed down the middle of a reading page and the
 * wrong one for a form in a 1fr column beside a 22.5rem rail: at 1440 it would
 * leave 200px of the column empty down the right, which is the imbalance 1.4.3
 * spent a version fixing on every other page.
 *
 * (0,2,0) against the component sheet's (0,1,0), so this wins on specificity and
 * not on source order — the cap is declared twice in that file and only one of
 * the two is in section 13.
 */
.lc-repform__main .lc-report {
	max-width: none;
	counter-reset: lc-repcard;
}

/*
 * The status lines from a previous submission, which `LC_Report::render_form()`
 * prints *before* the `<form>` — so they land above the first card, which is
 * where a "thank you, it is in the queue" belongs. Their colours are the
 * component sheet's and are untouched.
 */
.lc-repform__main .lc-report__status {
	margin: 0 0 1.25rem;
}

.lc-rep__card {
	margin: 0 0 1rem;
	padding: 1.15rem 1.3rem 1.3rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	counter-increment: lc-repcard;
}

/*
 * The two heads this theme writes, and the plugin's own `<legend>`, drawn as one
 * thing. Card two is labelled by the legend rather than by a heading of ours —
 * see `lc_theme_report_cards()` — so the selector has to name both.
 *
 * The legend keeps its default shrink-to-fit width on purpose. A rendered legend
 * is placed by the fieldset's own layout algorithm rather than as a normal block,
 * and engines differ on what `width` does to it; nothing here needs it to be
 * full-width, because the card's padding is what insets the head and there is no
 * fill or rule to span.
 */
.lc-rep__cardhead,
.lc-rep__card--evidence .lc-report__legend {
	margin: 0 0 0.9rem;
	padding: 0;
	color: var(--lc-fg);
	font-size: var(--lc-t-md);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.3;
}

/* The numeral, generated for the reason `.lc-repsteps__num` gives. The counter
   is reset on the form, so the three cards are 1, 2 and 3 in document order and
   cannot be renumbered by a card being added, moved or declined. */
.lc-rep__cardhead::before,
.lc-rep__card--evidence .lc-report__legend::before {
	margin-right: 0.4rem;
	color: var(--lc-fg);
	content: counter(lc-repcard) ".";
}

/* The last field in a card carries the plugin's own 1.25rem bottom margin, which
   inside a padded box is a second gap under the last row. */
.lc-rep__body > :last-child,
.lc-rep__card--evidence > .lc-report__evidence {
	margin-bottom: 0;
}

/*
 * The field labels, un-shouted.
 *
 * `lc-components.css` draws them as 13px uppercase with 0.06em tracking, which
 * is the site's label idiom on a reading page. The reference draws this form's
 * labels as sentence-case field names, and it is right to: "Part number you were
 * asked to quote" is a *question*, and eight words in uppercase tracking is a
 * banner rather than a label.
 *
 * (0,2,1) against the component sheet's (0,1,1). The wording is untouched.
 */
.lc-rep__card .lc-report__field label {
	margin: 0 0 0.3rem;
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.lc-rep__card .lc-report__hint {
	margin: 0 0 0.45rem;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	line-height: 1.5;
}

/* ---- Card one: the enquiry -------------------------------------------- */

/*
 * Two columns from 40rem, which is where a 640px card still leaves each field
 * about 290px — wide enough for `AP45-CIE91` and `example.com` with their
 * labels above them, and the narrowest this can be without the labels wrapping
 * in German.
 *
 * `:nth-child(n+3)` and not `:nth-child(3)`: the two-up row is the *first two*
 * fields, and anything the plugin adds after them spans rather than landing in a
 * half-width slot beside a field it has nothing to do with.
 */
.lc-rep__body--details {
	display: grid;
	gap: 0 1.25rem;
}

@media (min-width: 40rem) {
	.lc-rep__body--details {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lc-rep__body--details > .lc-report__field:nth-child(n+3) {
		grid-column: 1 / -1;
	}
}

/* ---- Card two: the evidence ------------------------------------------- */

/*
 * The two routes side by side with the plugin's own `or` between them, which is
 * what the reference draws and what the plugin's markup already says.
 *
 * `.lc-rep__routes` is a wrapper `lc_theme_report_cards()` inserts, because a
 * grid needs a container and `<fieldset>` is not a safe one to make into one:
 * the rendered legend is not a grid item and engines differ on where it goes.
 * Where that insertion declines the three children simply stack, which is the
 * plugin's own layout and correct.
 *
 * 52rem, not the 40 card one takes: this row is a file control, a chip and a
 * textarea, and the file control's own text — a button plus a file name — needs
 * about 240px before the name starts eliding.
 */
.lc-rep__routes {
	display: grid;
	gap: 1rem;
}

@media (min-width: 52rem) {
	.lc-rep__routes {
		gap: 0 1rem;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: stretch;
	}
}

/*
 * The upload panel. `--lc-band` on `--lc-bg` is 1.081:1 — a mood, not a boundary
 * — so the `--lc-rule` edge is what makes it an object, the same pairing every
 * card on this site uses.
 */
.lc-rep__routes > .lc-report__field--file {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

/*
 * The file control is **left native**, which is the plugin's own call and the
 * right one: restyling it means hiding it behind its label, and that costs
 * keyboard focus unless it is done very carefully. What changes here is the box
 * around it — a dashed field the reference draws as a drop area, which it also
 * genuinely is, because a browser will accept a file dropped straight onto an
 * `<input type="file">` with no script at all.
 *
 * So there is no `<div>` pretending to be a control, no `dragover` handler and
 * no JavaScript on this page. The dashed edge is 2px because 1px dashed at this
 * scale reads as a hairline that failed to render.
 */
.lc-rep__routes .lc-report__field--file input[type="file"] {
	width: 100%;
	/*
	 * `margin-block: auto` on the last flex item of a column, so the drop area
	 * centres in whatever height the row ends up at rather than sitting under the
	 * hints with a hand's width of dead panel below it. The two routes are
	 * stretched to the same height on purpose — they are alternatives, and one of
	 * them ending 120px short reads as the smaller offer.
	 *
	 * `text-align: center` is the one part of a native file control's own layout
	 * CSS can reach, and it is what puts the button and "no file chosen" in the
	 * middle of the box the reference draws that way.
	 */
	margin-block: auto;
	padding: 1.35rem 1rem;
	border: 2px dashed var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	text-align: center;
	cursor: pointer;
}

.lc-rep__routes .lc-report__field--file input[type="file"]:focus-visible {
	border-color: var(--lc-fg);
}

/*
 * The picker's own button, given the site's ghost-button edge. It is the one
 * part of a file control CSS can reach, and leaving it as the UA's default is a
 * grey Windows chip inside a designed card.
 */
.lc-rep__routes .lc-report__field--file input[type="file"]::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	color: var(--lc-fg);
	font-family: inherit;
	font-size: var(--lc-t-ui);
	font-weight: 600;
	cursor: pointer;
}

/*
 * The `or`, as the chip the reference draws it as.
 *
 * It is the plugin's own word in the flow — never a `::before`, which is the
 * plugin's note beside it and the reason it is what tells somebody using a
 * screen reader that the second field is an alternative rather than a second
 * requirement. All this does is draw it.
 *
 * `uppercase` where the plugin sets `lowercase`: `text-transform` changes how a
 * word is drawn and not what it is, so the string in the DOM, in the catalogue
 * and in a screen reader's buffer is the plugin's `or` either way.
 */
.lc-rep__routes > .lc-report__or {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	/* A grid item fills its track unless told not to, and a 50% radius on a
	   full-width box is a 400px ellipse rather than a chip — which is what the
	   stacked layout below 52rem showed. Declared on the base rule, not in the
	   media query, because the one-column stack is where it bites. */
	justify-self: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	margin: 0;
	padding: 0.25rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: 50%;
	background: var(--lc-bg);
	opacity: 1;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The paste route. No panel of its own: the textarea inside it is already a
   bordered box, and a border around a border is two objects where the reference
   draws one. */
.lc-rep__routes > .lc-report__field:not(.lc-report__field--file) {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* The box grows to the height of the panel beside it rather than leaving the
   two columns ragged. `flex: 1` on the field's own last child, so it works
   whichever of the two panels turns out to be taller. */
.lc-rep__routes > .lc-report__field:not(.lc-report__field--file) textarea {
	flex: 1 1 auto;
	min-height: 7.5rem;
}

/* The disclosure, and its wrapper is what the rail's help button points at. The
   rule above it is the plugin's own `border-top` on `.lc-report__how`. */
.lc-rep__how {
	margin-top: 1rem;
}

.lc-rep__card--evidence .lc-report__how {
	margin-bottom: 0;
	font-size: var(--lc-t-ui);
}

/*
 * The disclosure's own control, raised to the 44px minimum target.
 *
 * It measures **25px** with the plugin's stylesheet alone — a one-line box with
 * no padding — which is under WCAG 2.5.8 and was found by the width sweep rather
 * than by looking, because a summary that small still looks like a link. Padding
 * and not `min-height`: the arithmetic is checkable here (a 25px line box plus
 * 2 × 0.6rem is 44.2) and `min-height` on a `list-item` leaves the marker
 * top-aligned against a taller box.
 *
 * `display` is deliberately untouched. `display: flex` or `grid` on a `<summary>`
 * drops the disclosure triangle in Chrome, which is the only thing on the row
 * saying it opens.
 */
.lc-rep__card--evidence .lc-report__how > summary {
	padding-block: 0.6rem;
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	opacity: 1;
}

.lc-rep__card--evidence .lc-report__clients dd {
	color: var(--lc-fg-soft);
	opacity: 1;
}

/* ---- Card three: review and send -------------------------------------- */

/*
 * The privacy note, as the caution panel the reference draws.
 *
 * `--lc-fg` and not `--lc-fg-soft` for the ink. Slate on paper is 4.81:1, and
 * this tint darkens the surface under it — the margin is real but thin, and this
 * is the one paragraph on the page a reporter has to act on before they press
 * the button. The register's own ink is 16.3:1 on the tint. That is the same
 * reading `.lc-banner--caution` records: amber on an amber tint is *worse* than
 * amber on white, so a panel with a tint gets ink that does not care.
 *
 * `color-mix` against `--lc-bg` rather than a literal, so the tint follows the
 * surface if this block is ever put on one that is not paper.
 */
.lc-rep__body--send .lc-report__privacy {
	margin: 0 0 1rem;
	padding: 0.95rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--lc-accent) 34%, transparent);
	border-left: 3px solid var(--lc-accent);
	border-radius: var(--lc-radius);
	background: color-mix(in srgb, var(--lc-accent) 10%, var(--lc-bg));
	opacity: 1;
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

/* The line about not having to identify yourself, beside the id-card glyph. */
.lc-rep__anon {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 1rem;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.5;
}

.lc-rep__anonglyph {
	flex: 0 0 auto;
	margin-top: 0.12rem;
	color: var(--lc-fg-quiet);
}

/*
 * The submit paragraph. `.lc-report__submit` is the component sheet's gold
 * button already — brand gold carrying deep navy at 6.64:1, with a
 * `--lc-accent-text` rim at 5.72:1 against paper because a #c89b32 edge on white
 * is 2.56 and would fail WCAG 1.4.11. None of that is restated here; only the
 * paragraph's spacing is.
 */
.lc-rep__body--send > p:has(> .lc-report__submit) {
	margin: 0 0 0.6rem;
}

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

/* ==========================================================================
   6. The rail
   ========================================================================== */

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

/*
 * The help card's button carries the plugin's own summary wording, which is
 * eight words. `.lc-button` sets `--lc-t-base` (17px), and in a 22.5rem card
 * minus its padding that breaks at the hyphen in "e-mail" and leaves a line
 * reading "mail program". 15px is the size the rail's own body text is set at
 * and clears it; `text-wrap: balance` keeps the two lines even rather than
 * leaving one word on the second.
 */
.lc-repform__rail .lc-railcard__action .lc-button {
	padding-inline: 1rem;
	font-size: var(--lc-t-ui);
	text-wrap: balance;
}

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

.lc-repcheck__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	line-height: 1.45;
}

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

/*
 * 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`,
 * `.lc-registry__rail` and `.lc-index__rail` each carry.
 */
@media (min-width: 76rem) {
	.lc-repform__rail {
		position: sticky;
		top: calc(var(--lc-head-h) + 1rem);
	}
}

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

/* ==========================================================================
   7. 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-trustbar` and `.lc-railcard` are **not** listed: they are declared in
 * `style.css`, so section 18's own reset reaches them without help.
 *
 * The form itself is left alone. A printed report page is a page somebody is
 * reading rather than filling in, and hiding the fields would print three empty
 * cards with headings and no sign of what they ask for — the labels and hints
 * are the document.
 */
@media print {
	.lc-rephero,
	.lc-repform,
	.lc-rep__card,
	.lc-rep__routes > .lc-report__field--file {
		padding-block: 0.5rem;
		background: none !important;
	}

	.lc-rephero__bg {
		display: none;
	}

	/* The step nav goes: three in-page links are a thing only somebody who can
	   click has any use for, and the cards they point at are the next three
	   things on the page in any case. */
	.lc-repsteps {
		display: none;
	}

	.lc-repform__grid,
	.lc-rep__routes,
	.lc-rep__body--details {
		display: block;
	}

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

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