/*
 * orc-primitives.css — Meridian primitive components (Phase 1, additive).
 *
 * Consumes only --orc-* tokens (orc-tokens.css). No existing surface carries
 * an .orc-* class in Phase 1; these primitives are adopted per-surface in
 * Phases 2-6. Never color-only: every status rendering pairs icon + text.
 */

/* ---- Two-tone focus ring — 2px --orc-focus + 2px opposite-tone halo, :focus-visible only. */
.orc-focus-ring:focus-visible,
.orc-status-chip:focus-visible,
.orc-error-summary a:focus-visible {
  outline: 2px solid var(--orc-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--orc-bg);
  border-radius: var(--orc-radius-sm, 4px);
}

/* ---- Status chip (canonical status vocabulary; identity spec §5/§6) ---- */
.orc-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--orc-space-1, 0.25rem);
  font: 500 var(--orc-text-sm)/1 var(--orc-font-ui);
  padding: 0.25rem 0.5rem;
  border-radius: var(--orc-radius-pill, 999px);
  border: 1px solid var(--orc-border);
  color: var(--orc-ink);
  background: var(--orc-surface);
}
.orc-status-chip--succeeded { color: var(--orc-success); background: var(--orc-success-bg); }
/* healthy/enabled states (pipeline Active, integration Connected) share the
   success hue — the icon + label disambiguate them from a run "Succeeded". */
.orc-status-chip--active,
.orc-status-chip--connected { color: var(--orc-success); background: var(--orc-success-bg); }
.orc-status-chip--failed    { color: var(--orc-danger);  background: var(--orc-danger-bg); }
.orc-status-chip--partial,
.orc-status-chip--auto_paused,
.orc-status-chip--needs_attention { color: var(--orc-warning); background: var(--orc-warning-bg); }
.orc-status-chip--running   { color: var(--orc-info); background: var(--orc-info-bg); }
/* draft/scheduled/paused/disconnected keep neutral ink on surface (icon disambiguates). */
.orc-status-chip--sm { font-size: var(--orc-text-xs); padding: 0.125rem 0.375rem; }
.orc-status-chip__icon { font-size: 1em; }

/* ---- Error summary (GOV.UK dual pattern; identity spec §8) ---- */
.orc-error-summary {
  border-left: 4px solid var(--orc-danger);
  background: var(--orc-surface);
  border-top: 1px solid var(--orc-border);
  border-right: 1px solid var(--orc-border);
  border-bottom: 1px solid var(--orc-border);
  border-radius: var(--orc-radius-sm);
  padding: var(--orc-space-4);
  margin-bottom: var(--orc-space-5);
}
.orc-error-summary__title {
  font: 650 var(--orc-text-lg)/1.3 var(--orc-font-ui);
  color: var(--orc-ink);
  margin: 0 0 var(--orc-space-2);
}
.orc-error-summary__list {
  margin: 0;
  padding-left: var(--orc-space-5);
}
.orc-error-summary__list a {
  color: var(--orc-danger);
  text-decoration: underline;
}

/* ---- Skeleton (structure placeholder; reduced-motion-guarded shimmer) ---- */
.orc-skeleton {
  background: var(--orc-border);
  border-radius: var(--orc-radius-sm, 4px);
  position: relative;
  overflow: hidden;
}
.orc-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--orc-surface), transparent);
  transform: translateX(-100%);
  animation: orc-skeleton-shimmer var(--orc-dur-slow, 400ms) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .orc-skeleton::after { animation: none; }
}
@keyframes orc-skeleton-shimmer {
  to { transform: translateX(100%); }
}

/* ---- Empty & first-use states (identity spec §8) ----
 * Macro: partials/orc_empty_state.html. Title + short description + optional
 * pre-rendered action. Dense/no-results/error states stay undecorated; only the
 * celebratory first-run variant carries the dotted Rail invitation (§3.6 below). */
.orc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--orc-space-2);
  padding: var(--orc-space-8) var(--orc-space-6);
  color: var(--orc-ink-muted);
}
.orc-empty-state__title {
  margin: 0;
  font: 650 var(--orc-text-lg)/1.3 var(--orc-font-ui);
  color: var(--orc-ink);
}
.orc-empty-state__desc {
  margin: 0;
  max-width: 44ch;
  font: 400 var(--orc-text-sm)/1.5 var(--orc-font-ui);
  color: var(--orc-ink-muted);
}
.orc-empty-state__action {
  margin-top: var(--orc-space-3);
}

/* Celebratory first-run variant — the dotted teal Rail inviting the first
 * connection ("connect your first step", identity §9 ctx 3). This is the Rail's
 * one permitted product-shell context (§3.6): round teal dots (NOT a dashed
 * workflow edge) drawn as a short vertical rail ending in a solid junction dot
 * at the connect point. Borders-first, glow-free; static under reduced motion. */
.orc-empty-state--celebrate {
  padding-top: var(--orc-space-9);
}
.orc-empty-state--celebrate::before {
  content: "";
  width: 12px;
  height: 34px;
  margin-bottom: var(--orc-space-4);
  /* dotted rail (repeat-y round dots) + a solid junction dot at the base */
  background-image:
    radial-gradient(circle at 50% 50%, var(--orc-current) 45%, transparent 48%),
    radial-gradient(circle at 50% 50%, var(--orc-current) 40%, transparent 42%);
  background-repeat: no-repeat, repeat-y;
  background-size: 12px 12px, 3px 7px;
  background-position: center bottom, center top;
}