/* kit v1.9.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit — utilities. The shared PAGE-FRAME primitives, not a utility-class sheet.
 *
 * ADR-0005 §10 rejects Automatic.css's generated utility layer for these pages —
 * byte-counted single pages with a zero-JS arm A cannot amortise one. What IS shared,
 * because all three pages rebuilt it by hand, is the page furniture: the section frame,
 * the kicker/heading/prose trio, the button set, and .sr-only. That list is this file,
 * and the bar for adding to it is the same as for a role: two pages needing it, not one
 * page wanting it.
 *
 * Values are the skill-authored reference implementation (pages/slac/skinmatch-laser),
 * copied value-for-value — adoption there was verified computed-style-identical.
 * Role-tier only, like every kit file. Link FOURTH: roles → brand → reset → utilities.
 * Everything a section owns (its layout, its cards, its media) stays in that section's
 * own <style> — this file must never grow a section's insides.
 */

/* ---- accessibility ------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- section frame ------------------------------------------------------ */

.lp-section {
  padding-block: var(--space-2xl-to-l);
  padding-inline: var(--space-m);
}

.lp-section__inner {
  max-width: var(--container);
  margin-inline: auto;
}

/* The subtle alternate band — replaces the style="background: var(--bg-2)" that pages
 * repeated per section. */
.lp-section--tint {
  background: var(--bg-2);
}

/* roles.css re-declares the role tier under .section--dark; this paints it. The two
 * halves are split deliberately: the token flip is vocabulary (kit/tokens/roles.css),
 * the paint is page furniture (here) — a page that never links utilities.css still gets
 * correct tokens inside .section--dark and paints them itself. */
.section--dark {
  background: var(--bg);
  color: var(--text-c);
}

/* ---- kicker / heading / prose ------------------------------------------- */

.lp-kicker {
  margin: 0 0 var(--space-xs);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lp-h2 {
  margin: 0 0 var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--text-2xl-to-m);
  font-weight: 500;
  line-height: 1.15;
}

.lp-prose {
  max-width: var(--measure);
}

/* Both shapes are in use: .lp-prose as a wrapper (template) and directly on a <p>
 * (skinmatch-laser). The reset zeroes p margins, so without the second selector a
 * standalone prose paragraph loses its rhythm — the P2/P3 lesson about silent UA-margin
 * dependence, caught here by the adoption diff. */
.lp-prose p,
p.lp-prose {
  margin-block: 0 var(--space-s);
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-block) var(--btn-pad-inline);
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
}

.btn-secondary {
  background: var(--btn-secondary);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover);
}

.btn-outline {
  background: var(--btn-outline);
  color: var(--btn-outline-text);
  box-shadow: inset 0 0 0 1px var(--btn-outline-border);
}

.btn:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 3px;
}