/* ============================================================
   driftless — Static component styles
   Replaces React design-system bundle inline styles with CSS classes.
   ============================================================ */

/* ---- Wordmark ---- */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
}
.wordmark-sm { font-size: 1rem; }
.wordmark-md { font-size: 1.375rem; }
.wordmark-lg { font-size: 2rem; }
.wordmark sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.02em;
}
.wordmark-ink { color: var(--text-strong); }
.wordmark-ink sup { color: var(--brand-bright); }
.wordmark-inverse { color: var(--paper); }
.wordmark-inverse sup { color: var(--teal-300); }

/* driftless split-color wordmark: "drift" in cyan, "less" in violet */
.wordmark .wm-drift { color: var(--teal-500); }
.wordmark .wm-less { color: var(--purple-500); }
.wordmark-ink .wm-drift { color: var(--teal-600); }
.wordmark-ink .wm-less { color: var(--purple-600); }
.wordmark-inverse .wm-drift { color: var(--teal-400); }
.wordmark-inverse .wm-less { color: var(--purple-400); }

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { font-size: var(--text-sm); padding: 6px 12px; height: 32px; gap: 6px; }
.btn-md { font-size: var(--text-sm); padding: 9px 16px; height: 40px; gap: 8px; }
.btn-lg { font-size: var(--text-md); padding: 12px 22px; height: 48px; gap: 9px; }

.btn-primary {
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-active); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--ink-50); }
.btn-secondary:active { background: var(--ink-100); }

.btn-ghost {
  background: transparent;
  color: var(--text-body);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--ink-100); }
.btn-ghost:active { background: var(--ink-150); }

.btn-danger {
  background: var(--red-600);
  color: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}
.btn-danger:hover { background: var(--red-700); }

.btn .btn-icon-start,
.btn .btn-icon-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-sm .btn-icon-start,
.btn-sm .btn-icon-end { width: 15px; height: 15px; }
.btn-md .btn-icon-start,
.btn-md .btn-icon-end { width: 17px; height: 17px; }
.btn-lg .btn-icon-start,
.btn-lg .btn-icon-end { width: 19px; height: 19px; }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: -1px;
  flex-shrink: 0;
}
.badge-neutral { color: var(--ink-600); background: var(--ink-100); border-color: var(--ink-200); }
.badge-neutral.badge-dot::before { background: var(--ink-400); }
.badge-accent { color: var(--teal-700); background: var(--teal-50); border-color: var(--teal-100); }
.badge-accent.badge-dot::before { background: var(--teal-500); }
.badge-emphasis { color: var(--purple-700); background: var(--purple-50); border-color: var(--purple-100); }
.badge-emphasis.badge-dot::before { background: var(--purple-500); }
.badge-verify { color: var(--green-700); background: var(--green-50); border-color: var(--green-100); }
.badge-verify.badge-dot::before { background: var(--green-500); }
.badge-gate { color: var(--red-700); background: var(--red-50); border-color: var(--red-100); }
.badge-gate.badge-dot::before { background: var(--red-500); }
.badge-drift { color: var(--amber-700); background: var(--amber-50); border-color: var(--amber-100); }
.badge-drift.badge-dot::before { background: var(--amber-500); }

/* ---- Card ---- */
.card {
  position: relative;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--ring-hairline), var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 2px;
  background: var(--brand);
  border-radius: 0 0 2px 2px;
}
.card-none { padding: 0; }
.card-sm { padding: var(--space-3); }
.card-md { padding: var(--space-4); }
.card-lg { padding: var(--space-5); }
.card-xl { padding: var(--space-6); }

/* ---- Stat ---- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-value {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.stat-sublabel {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stat-accent .stat-value { color: var(--brand-strong); }

/* ---- Cascade ---- */
.cascade {
  display: flex;
  align-items: center;
}
.cascade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cascade-dot {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  border: 2px solid;
  transition: all var(--dur-base) var(--ease-out);
}
.cascade-label {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.cascade-line {
  flex: 1;
  border-radius: 2px;
  transition: background var(--dur-base) var(--ease-out);
}

/* Size: sm */
.cascade-sm .cascade-dot { width: 24px; height: 24px; font-size: var(--text-2xs); }
.cascade-sm .cascade-label { font-size: var(--text-2xs); }
.cascade-sm .cascade-line { height: 2px; margin: 0 8px; margin-bottom: 22px; }

/* Size: md */
.cascade-md .cascade-dot { width: 32px; height: 32px; font-size: var(--text-xs); }
.cascade-md .cascade-label { font-size: var(--text-xs); }
.cascade-md .cascade-line { height: 2px; margin: 0 12px; margin-bottom: 22px; }

/* Size: lg */
.cascade-lg .cascade-dot { width: 44px; height: 44px; font-size: var(--text-sm); }
.cascade-lg .cascade-label { font-size: var(--text-sm); }
.cascade-lg .cascade-line { height: 3px; margin: 0 16px; margin-bottom: 22px; }

/* States: done */
.cascade-done .cascade-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
.cascade-done .cascade-label { font-weight: var(--fw-medium); color: var(--text-body); }
.cascade-done-line { background: var(--brand); }

/* States: active */
.cascade-active .cascade-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
  box-shadow: var(--ring);
}
.cascade-active .cascade-label { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* States: pending */
.cascade-pending .cascade-dot {
  background: var(--paper);
  border-color: var(--border-strong);
  color: var(--text-subtle);
}
.cascade-pending .cascade-label { font-weight: var(--fw-medium); color: var(--text-subtle); }
.cascade-pending-line { background: var(--border-default); }

/* ---- Icon wrapper ---- */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-wrap svg {
  display: block;
}

/* ---- Emphasis run ---- */
.em {
  color: var(--text-emphasis);
}

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--inverse {
  color: var(--teal-300);
}
.eyebrow--emphasis {
  color: var(--text-emphasis);
}