/* Card Hairline — Vyzora Primitive
 * ----------------------------------------------------------------------------
 * The single card geometry used across Vyzora marketing + product surfaces.
 * Hairline-ruled rectangle on the same surface tone as the page — NO second
 * surface bed, NO fills, NO drop shadows.
 *
 * Replaces 4–5 ad-hoc card patterns currently inlined across homepage,
 * pricing, methodology, architectures, platform. Source of "visual continuity"
 * the founder reads in the Replit reference (60+ applications).
 *
 * Anti-pattern: never apply a second surface tone (background: var(--surface-2))
 * AND a border — pick one. The Replit reference uses border-only as the
 * geometry-of-record. Backgrounds are reserved for state escalation (halt,
 * warning, awaiting-approval) via the Emergency Directive layer.
 *
 * Composes from existing tokens — no new primitives introduced.
 * ============================================================================
 */

.card-hairline {
  display: block;
  background: var(--surface-1);
  /* Border falls back to --border-hairline when --border-hairline-soft is
   * undefined (Signal Map / Operational Dark). Archival Authority defines
   * --border-hairline-soft as the warm-tan editorial rule per ADR-008-D
   * 2026-05-17 amendment. */
  border: var(--border-hair) solid var(--border-hairline-soft, var(--border-hairline));
  border-radius: var(--radius-2);
  padding: var(--space-5) var(--space-6);
  color: var(--text-primary);
}

/* Dense variant — for grid layouts at viewport ≥1280 where the 5-up tier card
 * or 4-up product band needs tighter rhythm. Reduces padding by one step. */
.card-hairline--dense {
  padding: var(--space-4) var(--space-5);
}

/* Inset variant — for sub-cards living inside another card (e.g. evidence
 * artifacts inside a run summary card). Drops to surface-2 to differentiate
 * without violating the "border-only" rule. */
.card-hairline--inset {
  background: var(--surface-2);
}

/* Interactive variant — for cards that link, expand, or open a flow.
 * Hover state shifts hairline weight via border color, not background. */
@media (prefers-reduced-motion: no-preference) {
  a.card-hairline,
  button.card-hairline,
  .card-hairline--interactive {
    transition: border-color var(--dur-2) var(--ease-out);
  }
}
a.card-hairline:hover,
button.card-hairline:hover,
.card-hairline--interactive:hover {
  border-color: var(--border-strong);
}
a.card-hairline:focus-visible,
button.card-hairline:focus-visible,
.card-hairline--interactive:focus-visible {
  outline: var(--border-thin) solid var(--accent-trace);
  outline-offset: 2px;
}

/* Header band — for cards that lead with an eyebrow + title row.
 * Composes the .eyebrow primitive; do not redefine its type tokens here. */
.card-hairline__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair) solid var(--border-hairline-soft, var(--border-hairline));
}

.card-hairline__title {
  font-family: var(--font-display);
  font-size: var(--type-22);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.card-hairline__body {
  font-family: var(--font-body);
  font-size: var(--type-14);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.card-hairline__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--border-hairline-soft, var(--border-hairline));
  font-family: var(--font-mono);
  font-size: var(--type-11);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-tertiary);
}