:where([data-lib-root]) {
  min-width: 0;
  color: var(--lib-text-primary);
  font-family: var(--lib-font-body);
  font-size: var(--lib-font-size-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where([data-lib-root], [data-lib-root] *, [data-lib-root] *::before, [data-lib-root] *::after) {
  box-sizing: border-box;
}

:where([data-lib-root] img, [data-lib-root] picture, [data-lib-root] video, [data-lib-root] svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where([data-lib-root] button, [data-lib-root] input, [data-lib-root] select, [data-lib-root] textarea) {
  max-width: 100%;
  color: inherit;
  font: inherit;
}

:where([data-lib-root] :focus-visible) {
  outline: 0.1875rem solid color-mix(in srgb, var(--lib-border-accent) 45%, transparent);
  outline-offset: 0.1875rem;
}

/* Wide-screen law (Web_Build_System.md): a component title is never capped
   to a narrow column inside a wide container. The 24ch cap stays only for
   unclassed headings inside prose; classed headings belong to a component
   and use its own width (FAQ questions and centered section titles were
   wrapping and drifting off-center, 2026-10-07). */
:where([data-lib-root] h1:not([class]), [data-lib-root] h2:not([class]), [data-lib-root] h3:not([class]), [data-lib-root] h4:not([class])) {
  max-width: 24ch;
}

:where([data-lib-root] h1, [data-lib-root] h2, [data-lib-root] h3, [data-lib-root] h4) {
  margin-block: 0;
  color: inherit;
  font-family: var(--lib-font-heading);
  line-height: 1.1;
  text-wrap: balance;
}

:where([data-lib-root] p, [data-lib-root] ul, [data-lib-root] ol) {
  margin-block: 0;
}

/* Reading measure applies to prose only (unclassed p/ul/ol). A classed
   element belongs to a component and owns its width: the global clamp
   collapsed TRU-01, PRC-01/02, SVC-01 and the reviews track to ~65ch and
   pushed centered kickers off-center whenever this foundation was loaded
   (2026-10-07). */
:where([data-lib-root] p:not([class]), [data-lib-root] ul:not([class]), [data-lib-root] ol:not([class])) {
  max-width: var(--lib-content-measure);
}

.lib-band {
  width: 100%;
  padding-block: var(--lib-space-section-y);
}

.lib-container {
  width: var(--lib-container-standard);
  margin-inline: auto;
}

.lib-container--wide {
  width: var(--lib-container-wide);
  margin-inline: auto;
}

.lib-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lib-stack-gap, var(--lib-space-5));
}

.lib-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lib-cluster-gap, var(--lib-space-4));
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lib-grid-min, 16rem)), 1fr));
  gap: var(--lib-space-grid-gap);
}

.lib-field {
  display: grid;
  gap: var(--lib-space-2);
}

.lib-field > :is(input, select, textarea) {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--lib-space-3) var(--lib-space-4);
  border: 0.0625rem solid var(--lib-border-default);
  border-radius: var(--lib-radius-sm);
  background: var(--lib-surface-elevated);
}

.lib-field > textarea {
  min-height: 8rem;
  resize: vertical;
}

@media (max-width: 40rem) {
  .lib-band {
    padding-block: clamp(var(--lib-space-8), 10vw, var(--lib-space-section-y));
  }

  .lib-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-lib-root] *, [data-lib-root] *::before, [data-lib-root] *::after) {
    scroll-behavior: auto !important;
  }

  /* Token Contract V1 + Accessibility Migration gate, 2026-09-06: real,
     systemic root cause found and fixed here instead of patching each
     component individually (per this gate's own explicit instruction).
     Several real components (sections/narrative-profile,
     sections/comparison-columns, sections/services-section,
     sections/numbered-item-grid, patterns/tab-switcher -- found via a
     direct audit: every canonical CSS file declaring `transition:`
     without its own `prefers-reduced-motion` block) had zero reduced-
     motion handling for their own hover/interaction transitions, each
     leaking a real, measured 180ms+ transition under Reduced Motion
     (scripts/qa-component.js's real inspectReducedMotion() check --
     confirmed live on multiple catalog items). A handful of other real
     components (components/button-system, components/card-base) already
     had their own correct, local `transition: none` overrides -- this
     is the equivalent fix applied once, globally, as the universal
     industry-standard reduced-motion reset, so no future component can
     reintroduce the same gap by omission.
     Deliberately NOT scoped to [data-lib-root] like the scroll-behavior
     rule above -- a direct audit this pass found only 3 real HTML
     fixtures in the whole library actually carry that attribute, so that
     existing rule barely reaches real markup (a separate, pre-existing,
     disclosed-not-fixed finding; out of this fix's own scope). A
     reduced-motion preference is real host-page-wide behavior, not a
     library-internal concern, so the plain universal selector is the
     semantically correct scope here regardless. Near-zero (not exactly
     0) duration is deliberate: some libraries rely on a real
     `transitionend`/`animationend` event still firing. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Copy LAW title highlight, library default (2026-10-09). Before this, the
   only rule lived in the hero stylesheets, so a page without a hero showed
   unstyled highlights. Zero specificity: hero rules and project brand
   overrides win. Light surfaces use the brand/primary mix that passes WCAG
   AA (accent alone measured 2.75:1 on light surfaces, Hero System Step 3B);
   dark contexts use the accent. Both project class conventions are covered. */
:where([data-lib-root]) :where(.hhds-title-highlight, .text-highlight) {
  color: var(--lib-text-brand);
}

:where([data-lib-root]) :where(.lib-tone--dark, .lib-section-heading--dark, .lib-final-cta-section--dark, .lib-text-highlights-media:not(.lib-text-highlights-media--light), .hhds-section[data-surface="DARK"], .hhds-section[data-surface="DEEP"]) :where(.hhds-title-highlight, .text-highlight) {
  color: var(--lib-text-accent);
}

/* Page surfaces (2026-10-09). A page composition (TPL-010 data-surface)
   assigns each slot a surface; the composer wraps the section in a
   surface band and the section's own light background yields to it, so
   the composition alternates surface/panel as declared instead of every
   section sitting on the same page color. Dark-designed sections
   (hero, reviews band, dark text-highlights-media) are never wrapped. */
.lib-surface--surface { background-color: var(--lib-surface-page); }
.lib-surface--panel { background-color: var(--lib-surface-section); }
.lib-surface--surface > section,
.lib-surface--panel > section { background-color: transparent; }