/**
 * LieferantenCheck Core components, restyled.
 *
 * The plugin ships a complete, theme-agnostic stylesheet so the site works on
 * any theme. It is written to be neutral: rounded corners, `rgba(0, 0, 0, .x)`
 * borders, and — because the lookup was expected to sit in a dark Divi hero —
 * a `.lc-results` panel that hard-codes eleven descendant colours so it cannot
 * inherit light-on-light.
 *
 * This file layers over that. It changes nothing about what the components say
 * or which elements exist; it maps their colours onto the theme's tokens, so
 * both colour schemes are driven from one place, and squares off the geometry
 * so the evidence reads as a record rather than a set of cards.
 *
 * Loaded after `lieferantencheck.css`, so equal-specificity rules win on source
 * order. Where the plugin used `!important` — the four list resets that survive
 * Divi's `#left-area ol` — nothing here contests it. Those lists draw their own
 * numerals and must keep their markers off.
 *
 * @package LieferantenCheck
 */

/* ==========================================================================
   1. Plugin template shells
   ========================================================================== */

/* The plugin's own taxonomy templates render this wrapper. Bring it onto the
   theme's grid so a part-number page and the homepage share one left edge.

   A part-number page and a term page are reading matter end to end — every block
   in both is capped at the measure — so this takes the reading shell, the same
   one `style.css` gives `.lc-single` and `.lc-archive`. It has to be declared
   here rather than beside those: `.lc-main` is a single class either way, and
   this sheet loads *after* `style.css`, so a rule there would lose the tie to
   the one above and the wrapper would silently stay at the page grid. The `:has()`
   companion is kept for the same reason it exists in `style.css` — a template
   that grows a lookup should widen rather than crush the answer. */
.lc-main {
	max-width: var(--lc-shell-read);
	margin-inline: auto;
	padding: 0 var(--lc-gutter) clamp(3rem, 7vw, 5.5rem);
}

.lc-main:has(.lc-results) {
	max-width: var(--lc-shell);
}

.lc-part,
.lc-term,
.lc-body,
.lc-facts,
.lc-flags,
.lc-parts,
.lc-assessment,
.lc-correction,
.lc-donate,
.lc-report,
.lc-selfcheck,
.lc-cases {
	max-width: var(--lc-measure);
}

/* ==========================================================================
   2. Part-number and term page heads
   ========================================================================== */

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

.lc-part__eyebrow,
.lc-term__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	opacity: 1;
	color: var(--lc-accent-text);
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.lc-part__eyebrow::before,
.lc-term__eyebrow::before {
	flex: 0 0 auto;
	width: 2rem;
	height: 2px;
	background: currentColor;
	content: "";
}

/* The part number is the page. Someone arrived here by pasting this exact
   string into a search engine, and the first thing they need is to confirm,
   character by character, that it is the string in their inbox. */
.lc-part__code,
.lc-term__name {
	margin: 0 0 1.25rem;
	font-size: clamp(1.875rem, 6vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	word-break: break-word;
}

.lc-part__code code,
.lc-term__name code {
	padding-bottom: 0.12em;
	border-bottom: 3px solid var(--lc-accent);
	background: none;
	font-family: var(--lc-mono);
	letter-spacing: 0.005em;
}

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

/* An open verdict is the honest answer when nothing is published yet, and it
   must not be mistaken for a clearance. */
.lc-part__verdict--open {
	padding-left: 1rem;
	border-left: 3px solid var(--lc-accent);
	color: var(--lc-fg);
}

.lc-part__action {
	margin: 0 0 2.5rem;
	font-weight: 700;
}

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

.lc-part__case {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--lc-rule);
}

.lc-part__more,
.lc-part__empty,
.lc-term__empty,
.lc-term__archive {
	max-width: var(--lc-measure);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
}

.lc-term__archive {
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-rule);
}

.lc-body {
	padding-bottom: 0.5rem;
}

/* ==========================================================================
   3. Section headings inside plugin output
   ========================================================================== */

.lc-facts__heading,
.lc-flags__heading,
.lc-parts__heading,
.lc-assessment__heading,
.lc-selfcheck__heading,
.lc-donate__heading,
.lc-correction__heading {
	margin: 0 0 0.75rem;
	font-size: var(--lc-t-xl);
	letter-spacing: -0.018em;
}

.lc-facts__intro {
	max-width: var(--lc-measure);
	margin: 0 0 1.5rem;
	opacity: 1;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
}

.lc-facts,
.lc-flags,
.lc-assessment,
.lc-selfcheck {
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* ==========================================================================
   4. Severity banner
   ========================================================================== */

.lc-banner {
	max-width: var(--lc-measure);
	margin: 0 0 2rem;
	padding: 1.1rem 1.35rem;
	border-left: 4px solid currentColor;
	border-radius: var(--lc-radius);
	font-size: var(--lc-t-base);
}

.lc-banner__label {
	margin: 0 0 0.3rem;
	font-size: var(--lc-t-base);
	font-weight: 700;
	letter-spacing: 0;
}

.lc-banner__blurb {
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

/* Colour is never the only carrier of meaning here — the plugin always states
   the severity in words too — so these only need to be legible, not loud.

   No hand-written fallback under the `color-mix()` values below, and that is
   deliberate. A browser without `color-mix()` drops the declaration and the
   plugin's own background applies instead — and the plugin ships a value for
   each of these in *both* colour schemes. Adding a literal light fallback here
   would override the plugin's dark-scheme rule and produce pale text on a pale
   background for exactly the visitors it was meant to help. */
.lc-banner--strong-evidence {
	color: var(--lc-danger);
	background: color-mix(in srgb, var(--lc-danger) 9%, var(--lc-bg));
}

/* The tint is drawn from the mark token and the words from the text one. They
   have to differ here more than anywhere else: amber on a 12% amber tint is
   3.30:1, which is worse than amber on plain paper, not better. */
.lc-banner--caution {
	color: var(--lc-accent-text);
	background: color-mix(in srgb, var(--lc-accent) 12%, var(--lc-bg));
}

.lc-banner--unverified {
	color: var(--lc-fg-soft);
	background: var(--lc-band);
}

/* ==========================================================================
   5. Verified facts
   ========================================================================== */

.lc-fact {
	margin: 0 0 0.85rem;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.lc-fact--high    { border-left: 4px solid var(--lc-danger); }
.lc-fact--medium  { border-left: 4px solid var(--lc-accent); }
.lc-fact--context { border-left: 4px solid var(--lc-rule-firm); }

.lc-fact__label {
	margin: 0 0 0.4rem;
	font-size: var(--lc-t-base);
	font-weight: 700;
	line-height: 1.35;
}

.lc-fact__subject {
	margin: 0 0 0.5rem;
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-sm);
	letter-spacing: 0.01em;
	word-break: break-all;
}

.lc-fact__value {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

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

.lc-fact__source {
	margin: 0.7rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--lc-rule);
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

.lc-fact__source-label {
	color: var(--lc-fg-soft);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lc-facts__verified {
	margin: 1.25rem 0 0;
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

/* ==========================================================================
   6. Assessment
   ========================================================================== */

/* The separation between record and reading is the site's legal posture made
   visible, so it is drawn deliberately rather than with a tint that could be
   mistaken for decoration. */
.lc-assessment {
	padding: 1.35rem 1.5rem;
	border: 0;
	border-left: 4px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

.lc-assessment__disclaimer {
	margin: 0 0 1rem;
	opacity: 1;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.lc-assessment__body :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   7. Red flags
   ========================================================================== */

/* Squared numerals in the accent, matching the 01 / 02 / 03 register on the
   homepage. `decimal-leading-zero` is presentational only — the list is still
   an ordered list with the same six items in the same order. */
.lc-flag {
	margin: 0 0 1.5rem;
	padding-left: 3rem;
}

.lc-flag::before {
	content: counter(lc-flag, decimal-leading-zero);
	top: 0.1em;
	width: 2.1rem;
	height: auto;
	padding-bottom: 0.15rem;
	border-radius: 0;
	/* The rule is a mark and keeps the mark token; the numeral is read and
	   takes the text one. At --lc-t-sm the counter is normal text. */
	border-bottom: 2px solid var(--lc-accent);
	background: none;
	color: var(--lc-accent-text);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-sm);
	font-weight: 700;
	justify-content: flex-start;
	letter-spacing: 0.04em;
}

.lc-flag__title {
	margin: 0 0 0.35rem;
	font-size: var(--lc-t-base);
	font-weight: 700;
	line-height: 1.35;
}

/* Body size, not UI size. `--lc-t-base` is what `body` is set to and it was
   reaching nothing but two buttons: every explanatory paragraph on the site sat
   at either 19px or 15px, so the whole argument below a heading was set in
   small print. These are sentences a reader is meant to read. */
.lc-flag__detail {
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
}

/* ==========================================================================
   8. Part links, case list, correction
   ========================================================================== */

.lc-parts {
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
}

.lc-parts__item a {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	color: var(--lc-fg);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-ui);
}

.lc-parts__item a:hover,
.lc-parts__item a:focus {
	border-color: var(--lc-accent);
	background: var(--lc-band);
	color: var(--lc-fg);
}

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

.lc-case {
	margin: 0;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--lc-rule);
}

.lc-case__link {
	color: var(--lc-fg);
	font-size: var(--lc-t-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	text-decoration: none;
}

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

/* See `.lc-flag__detail` above. */
.lc-case__excerpt {
	margin: 0.45rem 0 0;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
}

.lc-correction {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: 1.35rem 1.5rem;
	border: 1px dashed var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	font-size: var(--lc-t-ui);
}

.lc-correction :last-child {
	margin-bottom: 0;
}

/* Divi's global link colour used to flatten the distinction between an
   ordinary link and the correction invitation, which has to stay findable. */
.lc-correction__link {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* ==========================================================================
   9. Lookup
   ========================================================================== */

.lc-lookup {
	max-width: var(--lc-measure);
	margin: 0 0 1.5rem;
}

.lc-lookup__label {
	margin: 0 0 0.5rem;
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.lc-lookup__input,
.lc-domain-check .lc-lookup__input {
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-field-bg);
	color: var(--lc-fg);
	font-family: var(--lc-mono);
	font-size: var(--lc-t-base);
	letter-spacing: 0.02em;
}

.lc-lookup__input::placeholder {
	color: var(--lc-fg-quiet);
	opacity: 1;
}

.lc-lookup__input:focus {
	border-color: var(--lc-fg);
}

/*
 * The primary action on the site, and it is gold everywhere — the hero, the
 * check page and the report form — rather than gold in the hero and ink
 * elsewhere.
 *
 * `--lc-accent-solid` and not `--lc-accent`: this is a *fill* with deep navy
 * printed on it (6.64:1), which is the one role the brand gold keeps on a light
 * surface. The mark token #af882c is the darkened sibling for rules and
 * borders, and using it here would give a muddy button for no reason.
 *
 * The hover pair is semantic rather than literal. `--lc-ink` on a dark-scheme
 * page is 1.08:1 against it, so a hover written with the brand constants would
 * make the button disappear for anyone on OS dark mode.
 *
 * 2.75rem is the 44px minimum target; the hero raises both halves to 52px.
 */
.lc-lookup__submit,
.lc-report__submit {
	min-height: 2.75rem;
	padding: 0.8rem 1.5rem;
	border: 1px solid var(--lc-accent-text);
	border-radius: var(--lc-radius);
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
	font-family: inherit;
	font-size: var(--lc-t-ui);
	font-weight: 600;
	letter-spacing: 0.03em;
}

.lc-lookup__submit:hover,
.lc-report__submit:hover,
.lc-lookup__submit:focus,
.lc-report__submit:focus {
	background: var(--lc-fg);
	border-color: var(--lc-fg);
	color: var(--lc-bg);
}

/* Once `.lc-lookup__row` wraps, the button lands on its own line at its
   content width — a small target under a full-width field. Give it the width
   it already occupies visually. */
@media (max-width: 560px) {
	.lc-lookup__row .lc-lookup__submit {
		flex: 1 1 100%;
	}
}

/*
 * The lookup re-laid for a 22.5rem rail card, and **nothing else changed**.
 *
 * Its label, its placeholder and its button wording are plugin msgids, and
 * `docs/theme-design.md` defers rewording them from the theme to a second pass.
 *
 * Column, not row. `.lc-lookup__row` is a wrapping flex row whose input is
 * `flex: 1 1 16rem`, so inside a rail this narrow it wraps on its own — and the
 * fix for a wrapped row above is behind a **viewport** media query at 560px,
 * which a 360px column inside a 1500px page never triggers. The button would
 * land on its own line at its content width: a 90px target under a full-width
 * field.
 *
 * **These four rules were in `alerts.css` until 1.12.0**, where a comment
 * explained at length that they could not move to `style.css` because they tie
 * on specificity with this file at (0,2,0) and would sit in plain sight doing
 * nothing. That was right about `style.css` and it named the wrong destination:
 * the sheet a rule has to out-order is the one to *put it in*, after the rules
 * it out-orders. `/domains/` is the second page with a lookup in its rail, and a
 * component copied into a second page sheet is one that drifts — which is the
 * whole argument section 15b of `style.css` is written under.
 *
 * They must stay **after** the wrapped-row media query above: that rule is
 * `.lc-lookup__row .lc-lookup__submit`, also (0,2,0), and in a column flex
 * container its `flex: 1 1 100%` is a *height* basis. A tie lost on source order
 * here is a rail button stretched down the card.
 */
.lc-railcard__lookup .lc-lookup {
	margin: 0;
}

.lc-railcard__lookup .lc-lookup__label {
	color: var(--lc-fg-soft);
}

.lc-railcard__lookup .lc-lookup__row {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.6rem;
}

.lc-railcard__lookup .lc-lookup__input,
.lc-railcard__lookup .lc-lookup__submit {
	flex: 0 0 auto;
	width: 100%;
}

/* A note under the box, which is what `/domains/` puts there. `.lc-railcard__note`
   is `margin: 0` in `style.css` — right for a card whose body is only the note,
   wrong for one that follows a form. Adjacency rather than a rule on the note
   itself, so the card that has no lookup is untouched. */
.lc-railcard__lookup + .lc-railcard__note {
	margin-top: 1rem;
}

/* ==========================================================================
   10. Results panel
   ========================================================================== */

/* The plugin declares its own colours here because the lookup was expected to
   sit inside a dark photographic hero. This theme's hero is type on paper, so
   the panel can join the page instead of defending itself from it — but the
   declarations have to be answered one for one, or the panel stays white while
   the rest of the site goes dark.

   The explicit `color` on descendants is kept: that is what actually rescued
   the panel from a dark background, and it costs nothing here. The white
   `background` and the box around it are dropped — a bordered panel holding
   bordered boxes reads as a stack of cards, and this design separates with
   rules. A single heavy top rule marks where the answer starts. */
.lc-results {
	max-width: var(--lc-measure);
	margin: 0 0 2rem;
	padding: 1.75rem 0 0;
	border: 0;
	border-top: 3px solid var(--lc-fg);
	border-radius: 0;
	background: none;
	color: var(--lc-fg);
	text-align: left;
}

.lc-results h2,
.lc-results h3,
.lc-results p,
.lc-results li,
.lc-results strong,
.lc-results code,
.lc-results th,
.lc-results td,
.lc-results caption,
.lc-results label {
	color: var(--lc-fg);
}

.lc-results p,
.lc-results li {
	color: var(--lc-fg-soft);
}

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

.lc-results h2 {
	font-size: var(--lc-t-lg);
	letter-spacing: -0.018em;
	line-height: 1.3;
}

.lc-results h3 {
	font-size: var(--lc-t-base);
	line-height: 1.4;
}

/* A miss carries no box. Its one piece of emphasis is the amber rule on the
   caveat inside it, and wrapping that in a second frame dilutes it. */
.lc-lookup__miss {
	margin: 0 0 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* A hit keeps its frame. It is the alarm state, and it is the one moment on
   the site where someone is about to send money to a documented operation. */
.lc-lookup__hit {
	margin: 0 0 2.25rem;
	padding: 1.25rem 1.4rem;
	border: 0;
	border-left: 4px solid var(--lc-danger);
	border-radius: var(--lc-radius);
	background: color-mix(in srgb, var(--lc-danger) 7%, var(--lc-bg));
}

.lc-lookup__hit-heading,
.lc-lookup__miss-heading {
	margin: 0 0 0.7rem;
	font-size: var(--lc-t-md);
	line-height: 1.35;
}

.lc-lookup__hit-link {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* A miss is the most dangerous moment on the site: the visitor is primed to
   read silence as clearance. The caveat keeps the weight of a warning. */
.lc-lookup__miss-warning {
	padding-left: 1rem;
	border-left: 4px solid var(--lc-accent);
	color: var(--lc-fg);
}

/* ==========================================================================
   11. Self-check
   ========================================================================== */

.lc-selfcheck__steps > li::marker {
	color: var(--lc-accent-text);
	font-family: var(--lc-mono);
	font-weight: 700;
}

.lc-selfcheck__step {
	margin: 0 0 2.25rem;
}

.lc-selfcheck__step:last-child {
	margin-bottom: 0;
}

.lc-selfcheck__step-title {
	margin: 0 0 0.45rem;
	font-size: var(--lc-t-md);
	letter-spacing: -0.012em;
}

.lc-selfcheck__step-hint {
	color: var(--lc-fg-soft);
}

.lc-selfcheck__engine {
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
}

.lc-selfcheck__engine:hover,
.lc-selfcheck__engine:focus {
	border-color: var(--lc-accent);
	background: var(--lc-band);
	color: var(--lc-fg);
}

.lc-selfcheck__step-read {
	padding-top: 0.6rem;
	border-top: 1px solid var(--lc-rule);
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
}

/* ==========================================================================
   11b. The evidence region gets the page, not the reading column
   ========================================================================== */

/*
 * `--lc-measure` is a *reading* measure: 44rem is roughly 75 characters, which
 * is right for the sentences an editor writes and wrong for everything the
 * lookup emits. The result of a check is a three-signal register — a verdict, a
 * four-column seller table, a registry snapshot, a checklist — and it was being
 * folded into two thirds of the page while the header, the page title and every
 * homepage band ran to the full 72rem shell. The page read as though it had been
 * cut off down the right-hand side, because it had.
 *
 * So the *region* takes the shell and the *sentences* keep the measure. That is
 * already the rule the rest of the site follows: `.lc-sechead__intro` is capped
 * at the measure on a homepage whose step and method grids span everything.
 *
 * `:has()` rather than a body class, because the condition is exactly "this
 * prose column is carrying a result panel" and that is what the selector says.
 * Where `:has()` is unsupported the whole rule is dropped and the region simply
 * stays at the reading measure — the 1.1.1 layout, narrow but never broken.
 * A body class would have had to name the *page*, and the lookup is a shortcode
 * that can be placed on any of them.
 */
.lc-prose:has(> .lc-results) {
	max-width: none;
}

/* Everything the editor wrote keeps the reading measure. Scoped to direct
   children so it cannot reach inside the plugin's own blocks, which set their
   own. */
.lc-prose:has(> .lc-results) > p,
.lc-prose:has(> .lc-results) > ul,
.lc-prose:has(> .lc-results) > ol,
.lc-prose:has(> .lc-results) > h2,
.lc-prose:has(> .lc-results) > h3 {
	max-width: var(--lc-measure);
}

/* The search box is a text field. Given the whole shell it becomes a 1100px
   input for a 12-character part number, which reads as a mistake rather than as
   generosity. */
.lc-prose:has(> .lc-results) > .lc-lookup {
	max-width: var(--lc-measure);
}

/* wpautop opens a paragraph for the shortcode and the parser closes it again the
   moment the `<form>` starts, leaving `<p></p>` behind. It is empty, so it says
   nothing — and it was contributing a paragraph's worth of margin between the
   intro and the search box. */
.lc-prose > p:empty {
	display: none;
}

.lc-results {
	max-width: none;
}

/* The blocks inside the panel that hold a table or a list rather than a
   paragraph. All of them were already `width: 100%` of a 44rem parent; releasing
   the parent is what actually hands them the room, and the seller table's fourth
   column is what needed it.

   `.lc-selfcheck` and `.lc-flags` are capped at the measure in section 1, which
   is right where the plugin's own templates render them on their own — so both
   are released here only inside a result panel. */
.lc-results .lc-sellers,
.lc-results .lc-search-check,
.lc-results .lc-selfcheck,
.lc-results .lc-flags {
	max-width: none;
}

/* Prose inside the panel. The plugin's own paragraph classes are listed rather
   than a blanket `.lc-results p`, because that would also catch the values in the
   seller table's disclosures and the `<dd>`s of the registry snapshot, which are
   data inside a narrow column and have to stay free to be narrow.

   The seller-link list is excluded by name: it is eight domains, not a sentence,
   and at the reading measure it wrapped to four ragged lines in the middle of the
   panel. `:not()` rather than a later override, because `.lc-search-check > p`
   would outrank a flat `.lc-search-check__sellers` and drop it silently.
   `.lc-search-check__documents` joins it at core 0.19.0 and is the same kind of
   thing for the same reason — a list of domains, not prose. This is the hazard
   the paragraph below describes arriving again, on schedule.

   The second half of the list is the four blocks added *after* this rule was
   written — `LC_Vat_Check`, `LC_Host_Check` and `LC_Site_Check` at plugin
   0.11.0, `render_facts()` at 0.15.0 — and their absence is exactly the hazard
   the note above describes, found rather than avoided. None of them was listed,
   so their sentences were bounded only by whatever the panel happened to be:
   1055px while the shell was 72rem, which is long for a measure and short
   enough that nobody looked. Widening the shell to 94rem at theme 1.5.1 took
   them to 1278 and made it plain. Measured on `tools/preview-check-page.php`,
   which is the only harness that renders these blocks under the theme: seven
   elements over 704px, every one of them a sentence, all four blocks
   represented.

   The `<dl>`s the same blocks render — `.lc-host-check__facts`,
   `.lc-site-facts__list` — are deliberately absent for the reason given above:
   a label against a value is data in a narrow column, and capping it is the
   mistake this list avoids for the registry snapshot. */
.lc-lookup__miss > p,
.lc-lookup__hit > p,
.lc-lookup__miss-heading,
.lc-lookup__hit-heading,
.lc-selfcheck__heading,
.lc-selfcheck__step-hint,
.lc-selfcheck__step-read,
.lc-search-check > p:not(.lc-search-check__sellers):not(.lc-search-check__documents),
.lc-sellers__headline,
.lc-sellers__summary,
.lc-sellers__source,
.lc-advisory > p,
.lc-domain-check__note,
.lc-domain-check__source,
.lc-vat-check__detail,
.lc-vat-check__reading,
.lc-vat-check__caveat,
.lc-vat-check__source,
.lc-host-check__detail,
.lc-host-check__reading,
.lc-host-check__abuse,
.lc-host-check__source,
.lc-site-check__item,
.lc-site-check__source,
.lc-site-facts__reading,
.lc-site-facts__source {
	max-width: var(--lc-measure);
}

/*
 * The lists get the width instead of leaving it blank.
 *
 * One breakpoint, at the width where the shell stops growing and the dead space
 * would otherwise begin; below it a single column is still the right answer.
 * `column-count` and not a grid, because these are ordered lists whose items are
 * different heights and whose correct reading order is down-then-across — the
 * same choice `home.css` makes for the red flags at 900px, kept identical so the
 * two bands do not behave differently for no reason.
 *
 * Nothing here uses `column-span`. The self-check's second step carries a form,
 * and pulling one `<li>` out of the flow to span both columns takes its list
 * marker with it in more than one engine. Two steps sit one per column as they
 * are, and three read 1-2 / 3, which is the order they are numbered in.
 */
@media (min-width: 62rem) {

	.lc-results .lc-selfcheck__steps,
	.lc-results .lc-flags__list {
		column-count: 2;
		column-gap: 3.5rem;
	}

	.lc-results .lc-selfcheck__step,
	.lc-results .lc-flag {
		break-inside: avoid;
	}
}

/* ==========================================================================
   12. Domain check
   ========================================================================== */

.lc-domain-check__label {
	margin: 0 0 0.5rem;
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.lc-domain-check__result {
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	border-top: 3px solid var(--lc-rule-firm);
}

.lc-domain-check__result--known  { border-top-color: var(--lc-danger); }
.lc-domain-check__result--ok     { border-top-color: var(--lc-fg); }
.lc-domain-check__result--invalid,
.lc-domain-check__result--reserved,
.lc-domain-check__result--throttled,
.lc-domain-check__result--unavailable { border-top-color: var(--lc-accent); }

.lc-domain-check__table caption {
	padding: 0 0 0.6rem;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-domain-check__table th,
.lc-domain-check__table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	border-bottom: 1px solid var(--lc-rule);
}

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

.lc-domain-check__table td {
	font-family: var(--lc-mono);
	font-size: var(--lc-t-ui);
}

.lc-domain-check__source {
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}

/* The registry answering is not the same as the registry clearing anyone.
   Keep the interpretation visually attached to the record it belongs to. */
.lc-domain-check__note {
	padding-left: 0.9rem;
	border-left: 3px solid var(--lc-accent);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
}

.lc-domain-check__link {
	font-weight: 600;
}

/* A 12rem label column does not fit a phone. */
@media (max-width: 560px) {
	.lc-domain-check__table,
	.lc-domain-check__table tbody,
	.lc-domain-check__table tr,
	.lc-domain-check__table th,
	.lc-domain-check__table td {
		display: block;
		width: auto;
	}

	.lc-domain-check__table tr {
		padding-block: 0.6rem;
		border-bottom: 1px solid var(--lc-rule);
	}

	.lc-domain-check__table th,
	.lc-domain-check__table td {
		padding: 0;
		border-bottom: 0;
	}

	.lc-domain-check__table th {
		font-size: var(--lc-t-sm);
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}
}

/* ==========================================================================
   13. Report form
   ========================================================================== */

/* `.lc-report__hp` is the honeypot. It is hidden by an inline style plus
   `aria-hidden`, and nothing here may reveal it — a visible field would be
   filled in by a human and their report silently discarded. */

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

.lc-report__field label {
	margin: 0 0 0.4rem;
	font-size: var(--lc-t-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lc-report__hint {
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-ui);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.lc-report__field input[type="text"],
.lc-report__field textarea {
	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-size: var(--lc-t-base);
}

.lc-report__field input[type="text"]:focus,
.lc-report__field textarea:focus {
	border-color: var(--lc-fg);
}

.lc-report__field textarea {
	font-family: var(--lc-mono);
	font-size: var(--lc-t-ui);
	line-height: 1.55;
}

.lc-report__privacy {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--lc-accent);
	background: var(--lc-band);
	opacity: 1;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-ui);
}

.lc-report__status {
	margin: 0 0 1.75rem;
	padding: 0.95rem 1.2rem;
	border-radius: var(--lc-radius);
	border-left: 4px solid currentColor;
	font-size: var(--lc-t-ui);
}

.lc-report__status--ok {
	color: #17603a;
	background: color-mix(in srgb, #17603a 10%, var(--lc-bg));
}

.lc-report__status--error {
	color: var(--lc-accent-text);
	background: color-mix(in srgb, var(--lc-accent) 12%, var(--lc-bg));
}

@media (prefers-color-scheme: dark) {
	.lc-report__status--ok {
		color: #8ee0b4;
	}
}

/* ==========================================================================
   14. Donations
   ========================================================================== */

/* `home.css` opens with "nothing is a card", and the donation block was the one
   card on the page — the last thing a reader sees on a site whose thesis is
   that there are none. The 3px amber top stays; the box around it goes. */
.lc-donate {
	margin: 0;
	padding: 1.6rem 0 0;
	border: 0;
	border-top: 3px solid var(--lc-accent);
	border-radius: 0;
}

.lc-donate__heading {
	font-size: var(--lc-t-lg);
}

.lc-donate__intro {
	margin: 0 0 1.25rem;
	color: var(--lc-fg-soft);
	font-size: var(--lc-t-base);
}

.lc-donate__link {
	padding: 0.6rem 1.15rem;
	border: 2px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
}

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

/* Small, quiet, and always present. It is a commitment, not a sales point. */
.lc-donate__integrity {
	padding-top: 1rem;
	border-top: 1px solid var(--lc-rule);
	opacity: 1;
	color: var(--lc-fg-quiet);
	font-size: var(--lc-t-sm);
}