/* ============================================================================
   LogosPilot — Component Layer
   Phase 5B · Wave 1 · Implements the frozen 34-component library (DF-1)
                       + Interaction Contract Certification v1.0

   Components consume TIER 2 semantic tokens only. No primitive is referenced
   below this line. A value with no semantic role is a MISSING ROLE, added at
   the token layer — never hard-coded here.
   ========================================================================= */

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

body {
  background: var(--color-background-base);
  color: var(--color-content-primary);
  font-family: var(--type-family-sans);
  font-size: var(--lp-size-16);
  line-height: var(--lp-lead-24);
  font-weight: var(--lp-weight-regular);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── FOCUS — UNIVERSAL CONTRACT ─────────────────────────────────────────────
   Never removed, under any circumstance. There is no design justification.
   3:1 against BOTH the control and its background on every surface.
   Survives reduced motion as a mandatory exception.                        */
:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-subtle);
}
:focus:not(:focus-visible) { outline: none; }

/* ── page-shell ─────────────────────────────────────────────────────────── */
.lp-skip {
  position: absolute; left: var(--space-400); top: var(--space-400);
  z-index: var(--layer-tooltip);
  transform: translateY(calc(-100% - var(--space-600)));
  background: var(--color-surface-overlay);
  color: var(--color-content-primary);
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-control);
  border: var(--border-width-default) solid var(--border-interactive);
  text-decoration: none;
  transition: transform var(--motion-micro) var(--motion-ease-standard);
}
.lp-skip:focus { transform: translateY(0); }

.lp-container {
  width: 100%;
  max-width: var(--grid-container-content);
  margin-inline: auto;
  padding-inline: var(--space-layout-margin);
}
.lp-container--narrow { max-width: var(--grid-container-narrow); }
.lp-container--wide   { max-width: var(--grid-container-wide); }

main { display: block; }

/* ── primary-nav ────────────────────────────────────────────────────────────
   Six destinations, FIXED. Never varies by state, plan, device, referrer or
   session — the site has no state. Persistent primary action.              */
.lp-header {
  position: sticky; top: 0; z-index: var(--layer-sticky);
  background: var(--color-surface-documentation);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.lp-header__inner {
  display: flex; align-items: center; gap: var(--space-inline-group);
  min-height: 64px;
}
.lp-identity {
  display: inline-flex; align-items: center; gap: var(--space-inline-tight);
  color: var(--color-content-primary);
  text-decoration: none;
  font-weight: var(--lp-weight-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* Mark placeholder — B1. Provisional geometry. The real lockup replaces this
   when the vector master is validated as a design master, not a trace.     */
.lp-identity__mark {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--radius-subtle);
  background: var(--color-accent-default);
}

.lp-nav { display: flex; align-items: center; gap: var(--space-inline-group); }
.lp-nav__link {
  color: var(--color-content-secondary);
  text-decoration: none;
  font-size: var(--lp-size-16); line-height: var(--lp-lead-24);
  font-weight: var(--lp-weight-medium);
  padding-block: var(--space-200);
  border-bottom: var(--border-width-emphasis) solid transparent;
  transition: color var(--motion-micro) var(--motion-ease-standard);
}
.lp-nav__link:hover { color: var(--color-content-primary); }
/* Current location indicated by MORE THAN COLOUR — a persistent rule. */
.lp-nav__link[aria-current="page"] {
  color: var(--color-content-primary);
  border-bottom-color: var(--color-accent-default);
}
.lp-header__action { margin-inline-start: auto; }

/* ── nav-disclosure ─────────────────────────────────────────────────────────
   Changes PRESENTATION, never INVENTORY. Every destination present at
   desktop is present at compact.                                          */
.lp-navtoggle { display: none; }

@media (max-width: 1023px) {
  .lp-header__inner { min-height: 56px; gap: var(--space-inline-default); }
  .lp-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: auto;
    min-width: var(--size-target-minimum); min-height: var(--size-target-minimum);
    background: none; border: var(--border-width-default) solid var(--border-interactive);
    border-radius: var(--radius-control);
    color: var(--color-content-primary); cursor: pointer;
  }
  .lp-header__action { margin-inline-start: 0; order: 3; }
  .lp-nav {
    display: none; order: 4; width: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0; padding-block: var(--space-300);
    border-top: var(--border-width-hairline) solid var(--border-subtle);
  }
  .lp-nav[data-open="true"] { display: flex; }
  .lp-nav__link {
    padding: var(--space-300) 0; border-bottom: none;
    min-height: var(--size-target-minimum);
    display: flex; align-items: center;
  }
  .lp-nav__link[aria-current="page"] {
    border-inline-start: var(--border-width-emphasis) solid var(--color-accent-default);
    padding-inline-start: var(--space-300);
  }
  .lp-header__inner { flex-wrap: wrap; }
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.lp-breadcrumb { font-size: var(--lp-size-14); line-height: var(--lp-lead-20); }
.lp-breadcrumb ol {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--space-inline-tight); align-items: center;
}
.lp-breadcrumb a { color: var(--color-content-tertiary); }
.lp-breadcrumb li[aria-current="page"] { color: var(--color-content-secondary); }
.lp-breadcrumb li + li::before {
  content: "/"; color: var(--color-content-disabled);
  margin-inline-end: var(--space-inline-tight);
}

/* ── page-header ────────────────────────────────────────────────────────── */
.lp-pagehead { padding-block: var(--space-stack-subsection) var(--space-stack-group); }
.lp-pagehead__purpose {
  color: var(--color-content-secondary);
  font-size: var(--lp-size-20); line-height: var(--lp-lead-32);
  max-width: var(--type-measure-default);
  margin-block-start: var(--space-stack-default);
}

/* ── TYPOGRAPHY ROLES — bound to semantic level, never chosen for size ──── */
h1, .lp-h1 {
  font-size: var(--lp-size-40); line-height: var(--lp-lead-48);
  font-weight: var(--lp-weight-strong); letter-spacing: -0.02em;
  max-width: var(--type-measure-default);
}
h2, .lp-h2 {
  font-size: var(--lp-size-32); line-height: var(--lp-lead-40);
  font-weight: var(--lp-weight-strong); letter-spacing: -0.015em;
  max-width: var(--type-measure-default);
}
h3, .lp-h3 {
  font-size: var(--lp-size-24); line-height: var(--lp-lead-32);
  font-weight: var(--lp-weight-strong); letter-spacing: -0.01em;
}
h4, .lp-h4 {
  font-size: var(--lp-size-20); line-height: var(--lp-lead-28);
  font-weight: var(--lp-weight-strong);
}
.lp-hero {
  font-size: var(--lp-size-48); line-height: var(--lp-lead-56);
  font-weight: var(--lp-weight-heavy); letter-spacing: -0.025em;
  max-width: 20ch;
}
.lp-lead {
  font-size: var(--lp-size-20); line-height: var(--lp-lead-32);
  color: var(--color-content-secondary);
  max-width: var(--type-measure-default);
}
.lp-prose {
  max-width: var(--type-measure-default);   /* HARD constraint. Full-width
                                               body text is a defect.       */
  color: var(--color-content-secondary);
}
.lp-prose > * + * { margin-block-start: var(--space-stack-default); }
.lp-prose strong { color: var(--color-content-primary); font-weight: var(--lp-weight-medium); }
.lp-small { font-size: var(--lp-size-14); line-height: var(--lp-lead-20); }
.lp-caption {
  font-size: var(--lp-size-12); line-height: var(--lp-lead-16);
  color: var(--color-content-tertiary);
}

/* Reading sizes are CONSTANT at every breakpoint. Only structural type
   compresses. Design Token §B.4.                                          */
@media (max-width: 1023px) {
  h1, .lp-h1 { font-size: var(--lp-size-32); line-height: var(--lp-lead-40); }
  h2, .lp-h2 { font-size: var(--lp-size-24); line-height: var(--lp-lead-32); }
  h3, .lp-h3 { font-size: var(--lp-size-20); line-height: var(--lp-lead-28); }
  .lp-hero  { font-size: var(--lp-size-40); line-height: var(--lp-lead-48); }
}
@media (max-width: 767px) {
  h1, .lp-h1 { font-size: var(--lp-size-32); line-height: var(--lp-lead-40); }
  .lp-hero  { font-size: var(--lp-size-32); line-height: var(--lp-lead-40); }
  .lp-pagehead__purpose { font-size: var(--lp-size-18); line-height: var(--lp-lead-28); }
}

/* ── link ────────────────────────────────────────────────────────────────
   Never distinguished by colour alone — underline affordance always.      */
a { color: var(--color-interactive-default); }
.lp-link {
  color: var(--color-interactive-default);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--motion-micro) var(--motion-ease-standard);
}
.lp-link:hover { color: var(--color-interactive-hover); }

/* ── section ────────────────────────────────────────────────────────────── */
.lp-section { padding-block: var(--space-stack-section); }
.lp-section + .lp-section {
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.lp-section__body { margin-block-start: var(--space-stack-group); }
.lp-subsection { margin-block-start: var(--space-stack-subsection); }

@media (max-width: 767px) {
  .lp-section { padding-block: var(--space-stack-subsection); }
  .lp-container { padding-inline: var(--space-400); }
}

/* ── button ──────────────────────────────────────────────────────────────
   Verb + object. 2–4 words. Sentence case. Exactly ONE primary per page.  */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-inline-tight);
  min-height: var(--size-target-comfortable);
  padding: var(--space-300) var(--space-500);
  border-radius: var(--radius-control);
  font-size: var(--lp-size-16); line-height: var(--lp-lead-24);
  font-weight: var(--lp-weight-medium);
  text-decoration: none; cursor: pointer;
  border: var(--border-width-default) solid transparent;
  transition: background-color var(--motion-micro) var(--motion-ease-standard),
              border-color     var(--motion-micro) var(--motion-ease-standard),
              color            var(--motion-micro) var(--motion-ease-standard);
}
.lp-btn--primary {
  background: var(--color-accent-default);
  color: var(--color-content-on-accent);
  font-weight: var(--lp-weight-strong);
}
.lp-btn--primary:hover { background: var(--color-interactive-hover); }
.lp-btn--primary:active { background: var(--color-accent-emphasis); }

.lp-btn--secondary {
  background: var(--color-surface-default);
  color: var(--color-content-primary);
  border-color: var(--border-interactive);
}
.lp-btn--secondary:hover { background: var(--color-surface-raised); }
.lp-btn--secondary:active { background: var(--color-surface-default); }

.lp-btn--tertiary { background: none; color: var(--color-interactive-default); padding-inline: 0; }
.lp-btn--tertiary:hover { color: var(--color-interactive-hover); }

/* disabled NEVER uses opacity — surface unchanged, only content changes.
   Opacity makes contrast depend on what is behind it, which cannot be
   verified. Design Token §E.10.                                           */
.lp-btn[aria-disabled="true"], .lp-btn:disabled {
  color: var(--color-content-disabled);
  background: var(--color-surface-default);
  border-color: var(--border-subtle);
  cursor: not-allowed; pointer-events: none;
}

.lp-btngroup { display: flex; flex-wrap: wrap; gap: var(--space-inline-default); }
@media (max-width: 767px) {
  .lp-btngroup { flex-direction: column; align-items: stretch; }
  .lp-btn { width: 100%; }
}

/* ── cta-block — exactly one per page. Never sticky, never floating. ────── */
.lp-cta {
  padding-block: var(--space-stack-section);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.lp-cta__support {
  color: var(--color-content-secondary);
  max-width: var(--type-measure-default);
  margin-block: var(--space-stack-default) var(--space-stack-group);
}

/* ── EVIDENCE ───────────────────────────────────────────────────────────────
   Never collapses, truncates, hides or lazy-loads at ANY breakpoint.
   Marketing content may compress. Evidence may not.                       */

/* metadata-list — values at content-primary, NOT tertiary. */
.lp-meta { display: grid; gap: var(--space-stack-default); }
.lp-meta__row {
  display: grid; grid-template-columns: minmax(11rem, auto) 1fr;
  gap: var(--space-inline-group); align-items: baseline;
}
.lp-meta__key {
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  color: var(--color-content-tertiary);
}
.lp-meta__val {
  color: var(--color-content-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .lp-meta__row { grid-template-columns: 1fr; gap: var(--space-100); }
}

/* code-block / checksum — radius-none. Rounded corners suggest an
   approximate object; this content is exact.                              */
.lp-code {
  background: var(--color-surface-code);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-none);
  padding: var(--space-inset-default);
  font-family: var(--type-family-mono);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  color: var(--color-content-primary);
  overflow-x: auto;
}

/* checksum-field — selectable text, NEVER an image. Never truncated.
   Wraps without breaking copy.                                            */
.lp-checksum {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-inline-default);
}
.lp-checksum__value {
  flex: 1 1 24rem;
  font-family: var(--type-family-mono);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  color: var(--color-content-primary);
  background: var(--color-surface-code);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-none);
  padding: var(--space-300);
  overflow-wrap: anywhere;   /* wrap, never truncate — an ellipsis would
                                destroy the artefact                        */
  user-select: all;
}

/* status-indicator — icon + label + colour, ALWAYS all three.
   Colour is reinforcement, never the carrier of meaning.                  */
.lp-status {
  display: inline-flex; align-items: center; gap: var(--space-inline-tight);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  font-weight: var(--lp-weight-medium);
}
.lp-status__icon { width: 16px; height: 16px; flex: none; }
.lp-status--verified    { color: var(--color-feedback-success); }
.lp-status--information { color: var(--color-feedback-information); }
.lp-status--warning     { color: var(--color-feedback-warning); }
.lp-status--danger      { color: var(--color-feedback-danger); }

/* integrity-panel — the site's single fold requirement. */
.lp-integrity {
  background: var(--color-surface-evidence);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-container);
  padding: var(--space-inset-comfortable);
}
.lp-integrity__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-inline-default);
  padding-block-end: var(--space-stack-default);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  margin-block-end: var(--space-stack-related);
}
@media (max-width: 767px) {
  .lp-integrity { padding: var(--space-inset-default); }
}

/* data-table — real semantics, radius-none, data sits on the field,
   horizontal scroll with no truncation.                                   */
.lp-tablewrap { overflow-x: auto; }
.lp-table {
  width: 100%; border-collapse: collapse;
  background: var(--color-surface-table);
  font-variant-numeric: tabular-nums;
}
.lp-table caption {
  text-align: start; color: var(--color-content-tertiary);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  padding-block-end: var(--space-stack-default);
}
.lp-table th, .lp-table td {
  text-align: start; padding: var(--space-300) var(--space-400);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  vertical-align: top; white-space: nowrap;
}
.lp-table th {
  color: var(--color-content-tertiary);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  font-weight: var(--lp-weight-medium);
}
.lp-table td { color: var(--color-content-primary); }
.lp-table td[data-wrap] { white-space: normal; }
.lp-table tbody tr:hover td { background: var(--color-surface-documentation); }

/* ── admonition — three types only. A page with five warnings has none. ── */
.lp-note {
  border-inline-start: var(--border-width-emphasis) solid var(--border-strong);
  background: var(--color-surface-documentation);
  padding: var(--space-inset-default);
  border-radius: var(--radius-none);
}
.lp-note__label {
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  font-weight: var(--lp-weight-strong);
  color: var(--color-content-primary);
  margin-block-end: var(--space-stack-tight);
}
.lp-note--important { border-inline-start-color: var(--color-feedback-warning); }
.lp-note--warning   { border-inline-start-color: var(--color-feedback-danger); }

/* ── boundary — "What LogosPilot does not do". noCollapse.
   Never adjacent to the CTA (grammar constraint G3).                      */
.lp-boundary { display: grid; gap: var(--space-stack-group); }
.lp-boundary__item {
  padding-inline-start: var(--space-400);
  border-inline-start: var(--border-width-emphasis) solid var(--border-default);
}
.lp-boundary__claim {
  color: var(--color-content-primary);
  font-size: var(--lp-size-18); line-height: var(--lp-lead-28);
  font-weight: var(--lp-weight-medium);
}
.lp-boundary__detail {
  color: var(--color-content-secondary);
  margin-block-start: var(--space-stack-tight);
  max-width: var(--type-measure-default);
}

/* ── ordered-procedure — one action per step. */
.lp-steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-stack-related); }
.lp-steps > li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--space-inline-default); }
.lp-steps > li::before {
  content: counter(step);
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  border: var(--border-width-default) solid var(--border-interactive);
  color: var(--color-content-primary);
  font-size: var(--lp-size-14); font-weight: var(--lp-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ── link-list — canonical / lateral / progressive. No decorative links. ── */
.lp-linklist { list-style: none; padding: 0; display: grid; gap: var(--space-stack-default); }
.lp-linklist__label {
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  color: var(--color-content-tertiary);
  margin-block-end: var(--space-stack-default);
}

/* ── card — exactly ONE action for the whole surface. */
.lp-card {
  background: var(--color-surface-default);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-container);
  padding: var(--space-inset-comfortable);
  display: grid; gap: var(--space-stack-default);
  align-content: start;
}
a.lp-card { text-decoration: none; color: inherit; transition: background-color var(--motion-micro) var(--motion-ease-standard); }
a.lp-card:hover { background: var(--color-surface-raised); }
.lp-cardgrid { display: grid; gap: var(--space-inline-group); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ── figure — dimensions reserved. Zero layout shift. */
.lp-figure { display: grid; gap: var(--space-stack-tight); }
.lp-figure img {
  width: 100%; height: auto;
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-container);
  background: var(--color-surface-documentation);
}
.lp-figure figcaption { color: var(--color-content-tertiary); font-size: var(--lp-size-14); line-height: var(--lp-lead-20); }

/* Asset placeholder — records a REQUIREMENT. Never invented artwork.      */
.lp-assetreq {
  display: grid; place-items: center; gap: var(--space-stack-tight);
  min-height: 18rem; padding: var(--space-inset-comfortable);
  border: var(--border-width-emphasis) dashed var(--border-default);
  border-radius: var(--radius-container);
  background: var(--color-surface-documentation);
  color: var(--color-content-tertiary);
  text-align: center;
}
.lp-assetreq__id {
  font-family: var(--type-family-mono); font-size: var(--lp-size-14);
  color: var(--color-content-secondary);
}

/* ── inline-message — what happened / why / next step / help route ─────── */
.lp-msg {
  display: grid; gap: var(--space-stack-tight);
  padding: var(--space-inset-default);
  border-inline-start: var(--border-width-emphasis) solid var(--border-default);
  background: var(--color-surface-documentation);
}
.lp-msg--danger { border-inline-start-color: var(--color-feedback-danger); }
.lp-msg--success { border-inline-start-color: var(--color-feedback-success); }
.lp-msg__title { font-weight: var(--lp-weight-strong); color: var(--color-content-primary); }

/* ── footer — complete directory. No newsletter, badges, or customer logos. */
.lp-footer {
  margin-block-start: var(--space-stack-section);
  background: var(--color-surface-documentation);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  padding-block: var(--space-stack-subsection);
}
.lp-footer__cols {
  display: grid; gap: var(--space-inline-group);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.lp-footer h2 {
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  font-weight: var(--lp-weight-medium);
  color: var(--color-content-tertiary);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-block-end: var(--space-stack-default);
}
.lp-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-stack-tight); }
.lp-footer a { color: var(--color-content-secondary); text-decoration: none; }
.lp-footer a:hover { color: var(--color-content-primary); text-decoration: underline; }
.lp-footer__legal {
  margin-block-start: var(--space-stack-subsection);
  padding-block-start: var(--space-stack-related);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  color: var(--color-content-tertiary);
  font-size: var(--lp-size-14); line-height: var(--lp-lead-20);
  display: grid; gap: var(--space-stack-tight);
}

/* ── UNRESOLVED VALUE MARKER ───────────────────────────────────────────────
   A publication blocker rendered VISIBLY. Placeholder tokens are never
   resolved by the build — the gap stays visible rather than silently
   filled. Functional Architecture §B.1 rule 4.                            */
.lp-blocked {
  font-family: var(--type-family-mono);
  font-size: 0.9em;
  color: var(--color-feedback-warning);
  border-bottom: 1px dashed var(--color-feedback-warning);
  white-space: nowrap;
}

/* ── in-page-nav ────────────────────────────────────────────────────────── */
.lp-toc { position: sticky; top: 88px; align-self: start; }
.lp-toc ul { list-style: none; padding: 0; display: grid; gap: var(--space-stack-tight); }
.lp-toc a { color: var(--color-content-tertiary); text-decoration: none; font-size: var(--lp-size-14); line-height: var(--lp-lead-20); }
.lp-toc a:hover { color: var(--color-content-primary); }
.lp-withtoc { display: grid; grid-template-columns: 1fr; gap: var(--space-inline-group); }
@media (min-width: 1024px) { .lp-withtoc { grid-template-columns: 15rem 1fr; } }
@media (max-width: 1023px) { .lp-toc { display: none; } }

/* ── utility (layout only — no decorative utilities) ───────────────────── */
.lp-stack-tight   > * + * { margin-block-start: var(--space-stack-tight); }
.lp-stack         > * + * { margin-block-start: var(--space-stack-default); }
.lp-stack-related > * + * { margin-block-start: var(--space-stack-related); }
.lp-stack-group   > * + * { margin-block-start: var(--space-stack-group); }
.lp-cols2 { display: grid; gap: var(--space-inline-group); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.lp-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── PHASE 5D · UTILITY ROLES ───────────────────────────────────────────────
   Added to eliminate inline style attributes. Each replaces a repeated
   declaration; every value resolves to a semantic token. No new visual
   behaviour is introduced — these are the same declarations, named.
   Design Token §A.5: "a value used twice becomes a token."               */

.lp-breadcrumb--top   { padding-top: var(--space-500); }
.lp-section--first    { padding-block-start: 0; }
.lp-pagehead--hero    { padding-block: var(--space-stack-subsection) var(--space-stack-group); }

.lp-mt-tight   { margin-block-start: var(--space-stack-tight); }
.lp-mt         { margin-block-start: var(--space-stack-default); }
.lp-mt-group   { margin-block-start: var(--space-stack-group); }
.lp-mb-section { margin-block-end: var(--space-stack-section); }

/* Measure role for short explanatory captions. Narrower than
   type-measure-narrow because these sit inside a centred placeholder block
   rather than a reading column. */
.lp-measure-caption { max-width: 44ch; }

/* Evidence headline roles — previously inline on the integrity panel.
   Bound to semantic type levels, never chosen for size. */
.lp-evidence-title {
  font-size: var(--lp-size-24); line-height: var(--lp-lead-32);
  font-weight: var(--lp-weight-strong); font-variant-numeric: tabular-nums;
}
.lp-evidence-subtitle {
  font-size: var(--lp-size-20); line-height: var(--lp-lead-28);
  font-weight: var(--lp-weight-strong);
}

/* The search input is the one control that must not inherit the monospace
   treatment of the checksum field it shares layout with. */
.lp-searchfield { font-family: var(--type-family-sans); }

/* ══════════════════════════════════════════════════════════════════════════
   AMENDMENT A-10 — WCAG 1.4.10 Reflow
   Authorized by executive approval of decision B-18, Phase 6.4.
   Scope: eliminate horizontal overflow at 320px. Nothing else.

   No new component. No new breakpoint. No new layout. No visual change at
   any width where the content already fits — every rule below is inert
   until the container is too narrow to hold its content.

   ── CAUSE 1 · grid and flex items default to min-width:auto ──────────────
   An item's automatic minimum size is its MIN-CONTENT width, and a track
   sized 1fr will not shrink below it. Measured consequence: .lp-withtoc was
   288px wide holding a single 896px track, because .lp-table cells carry
   white-space:nowrap and their min-content is the full unwrapped table.

   This is also why .lp-tablewrap's existing overflow-x:auto never engaged:
   a scroll container that cannot shrink never has anything to scroll.
   min-width:0 restores the ability to shrink, and the scrollbar the design
   already specified finally does its job — the table still never truncates.

   ── CAUSE 2 · minmax() floors wider than the viewport ────────────────────
   .lp-cols2 requested minmax(20rem, 1fr). 20rem is 320px; at a 320px
   viewport the container is 288px after layout margins, so the track was
   forced 32px wider than its parent.

   min(20rem, 100%) keeps the 20rem intent everywhere it fits and clamps to
   the container only when it cannot. Preferred over a media query because
   it needs no new breakpoint and cannot desynchronise from one.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cause 1 — permit shrinking below min-content in every layout primitive. */
.lp-cols2 > *,
.lp-withtoc > *,
.lp-cardgrid > *,
.lp-card > *,
.lp-meta__row > *,
.lp-steps > li,
.lp-steps > li > *,
.lp-boundary > *,
.lp-footer__cols > *,
.lp-checksum > *,
.lp-integrity__head > *,
.lp-header__inner > *,
.lp-btngroup > * { min-width: 0; }

/* The scroll container itself must be allowed to shrink, or the table it
   wraps dictates the width of every ancestor. */
.lp-tablewrap { min-width: 0; }

/* Cause 2 — clamp track floors to the container. */
.lp-cols2    { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.lp-cardgrid { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

/* Long unbroken strings — checksums, filenames, URLs — cannot wrap at a
   space because they contain none. Without this they set a min-content
   width no amount of shrinking can satisfy. Applied to the evidence
   surfaces only; prose is unaffected. */
.lp-checksum, .lp-checksum code { overflow-wrap: anywhere; }