/* Olocus shared control + read-surface primitives.
 *
 * Loaded by EVERY bundle (app, verify, attest) immediately after
 * base.css, so the CTA system, hero typography, and the verifier proof
 * matrix render wherever their class constants are used — not just in
 * the app bundle that happens to load welcome / capture / proofs CSS.
 *
 * Before this sheet existed, the canonical rules lived in page
 * component files; the verify bundle (which loads only tokens + base +
 * verify.css) therefore rendered its buttons, headings, error text, the
 * entire proof matrix, the disclosure chips, and the locus-pulse beacon
 * as unstyled browser defaults. See docs/STYLE-GUIDE.md §5 (type), §8.5
 * (locus pulse), §10.2 (buttons), §11 (proof matrix). Component CSS adds
 * only contextual layout overrides on top of these primitives, and is
 * loaded after this sheet so those overrides still win. */

/* ── Hero typography (STYLE-GUIDE §5) ─────────────────────────────── */
.hero-headline {
  font-family: var(--font-display);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  letter-spacing: 0;
  color: var(--color-text-heading);
  max-inline-size: var(--type-h1-max-inline-size);
  margin-block-start: var(--space-4);
}

.hero-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 48ch;
}

/* ── Primary / secondary / danger CTA system (STYLE-GUIDE §10.2) ───── */
/* Primary CTA — coral fill (--accent) with legible coral-ink text
 * (--accent-ink). */
.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary-bg);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-default) var(--ease-default);
  align-self: start;
}

.primary-cta:hover {
  text-decoration: none;
}

.primary-cta:hover:not([disabled]) {
  background: var(--color-primary-hover);
}

.primary-cta:active:not([disabled]) {
  background: var(--color-primary-active);
}

.primary-cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Danger modifier — bounded/cautionary treatment for irreversible
   actions (e.g. the sovereign-mode escrow wipe), matching the
   .signature-button-danger language. The compound selector keeps the
   .primary-cta box model + sizing while overriding only the colour, and
   wins on specificity regardless of stylesheet order. */
.primary-cta.danger-cta {
  background: var(--color-bg-page);
  border: 1px solid var(--color-accent-bounded);
  color: var(--color-text-bounded);
}

.primary-cta.danger-cta:hover:not([disabled]) {
  background: var(--color-accent-bounded-subtle);
}

.primary-cta.danger-cta:active:not([disabled]) {
  background: var(--color-accent-bounded-subtle);
}

.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--color-primary-text);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-default) var(--ease-default), border-color var(--duration-default) var(--ease-default);
  align-self: start;
}

.secondary-cta:hover {
  text-decoration: none;
  background: var(--color-bg-elevated);
  border-color: var(--color-primary-accent);
}

.cta-note {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 48ch;
  margin-block-start: calc(-1 * var(--space-2));
}

/* ── Verifier proof matrix (STYLE-GUIDE §11) ──────────────────────── */
/* Shared by the app's proof preview and the verify bundle's read
 * surface — every field on its own row, never aggregated. */
.modal-error {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--red-500);
  margin: 0;
}

.matrix-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  border-block-start: 1px solid var(--color-border-secondary);
  padding-block-start: var(--space-3);
}

.matrix-row {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.matrix-label {
  /* AA on the elevated `.verify-card` (--mist) — see tokens.css. Shared
   * with the verify bundle; dark mode keeps the current value. */
  color: var(--color-text-muted-on-elevated);
  font-weight: 500;
}

.matrix-value {
  color: var(--color-text-heading);
  word-break: break-all;
  /* §5.4 — tabular figures for the validity window / range / hex rows. */
  font-variant-numeric: tabular-nums lining-nums;
}

.matrix-mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

@media (max-width: 480px) {
  .matrix-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ── §11.2 field-level state styling ──────────────────────────────────
 * Olocus flags *attention*, never *success*: valid / known / active rows
 * carry no decoration. The meaning is always carried by the value text
 * (e.g. "· expired", "verification failed") so it never relies on colour
 * alone (WCAG 1.4.1). The Lucide state icon is supplementary. */
.matrix-state-icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  vertical-align: -3px;
  margin-inline-end: var(--space-1);
}

/* Attention (expired / <24h): amber on the icon. The value text stays in
 * the default ink for legibility — `--accent-2` text would fail contrast
 * on the elevated card (per docs/UX.md readable-by-default); the amber
 * triangle + the appended status word carry the signal. */
.matrix-row--attention .matrix-state-icon {
  color: var(--accent-2);
}

/* Invalid integrity / malformed: red value text + icon (matches the
 * existing `.modal-error` red), and the proof-token surface gains the
 * §11.2 1px `--red-500` outer ring. */
.matrix-row--invalid .matrix-value {
  color: var(--red-500);
}

.verify-card.verify-card--invalid {
  box-shadow: 0 0 0 1px var(--red-500);
}

/* ── The locus pulse — signature motion on the matrix head (§8.5) ──── */
/* Fires once when the user issues a proof: the beacon mark anchors the
 * matrix head at icon-2xl (48px per §11.1) and its accent dot scales
 * 1.0 → 1.4 → 1.0 with a brightness lift over 300ms. The ring does not
 * move. animation-delay 120ms aligns with the §8.5 choreography window
 * (the dot pulse runs 120–420ms; the dot settles by 500ms). Reduced
 * motion suppresses the keyframes; the dot is drawn in its rest state
 * on first paint. */
.matrix-beacon-anchor {
  display: grid;
  place-items: center;
  margin-block-end: var(--space-3);
  color: var(--color-text-heading);
}

.matrix-beacon-anchor svg {
  inline-size: 48px;
  block-size: 48px;
  display: block;
}

.matrix-beacon-anchor .beacon-dot {
  /* Transform-origin matches the dot's centre so the scale lift
   * stays anchored to the locus rather than drifting off-axis. */
  transform-origin: 12px 8.855px;
  transform-box: fill-box;
  animation: locus-pulse 300ms 120ms var(--ease-out) 1 forwards;
}

@keyframes locus-pulse {
  0%   { transform: scale(1.0); filter: brightness(1.0); }
  50%  { transform: scale(1.4); filter: brightness(1.15); }
  100% { transform: scale(1.0); filter: brightness(1.0); }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-beacon-anchor .beacon-dot {
    animation: none;
  }
}

/* ── Disclosure chip — witness / summary disclosure marker (§11) ───── */
.disclosure-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--r-full);
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: lowercase;
}