/* ============================================================================
   EMERSION DESIGN SYSTEM — Components
   Requires colors_and_type.css. Pill buttons, hairline cards, inputs, badges.
   ============================================================================ */

/* ---------------------------------------------------------------- Buttons -- */
.em-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 20px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.em-btn:active { transform: scale(0.97); }
.em-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Primary — solid black */
.em-btn--primary { background: var(--color-black); color: var(--fg-on-dark); }
.em-btn--primary:hover { opacity: 0.85; }

/* Secondary — white, hairline border */
.em-btn--secondary { background: var(--color-white); color: var(--fg); border-color: var(--border); }
.em-btn--secondary:hover { background: var(--bg-subtle); }

/* Accent — solid blue, used sparingly for the single most important action */
.em-btn--accent { background: var(--color-accent); color: #fff; }
.em-btn--accent:hover { background: var(--color-accent-deep); }

/* Ghost — text-only */
.em-btn--ghost { background: transparent; color: var(--fg); }
.em-btn--ghost:hover { background: var(--bg-subtle); }

/* Sizes */
.em-btn--sm { height: 36px; padding: 0 14px; font-size: var(--text-caption); }
.em-btn--lg { height: 52px; padding: 0 28px; font-size: var(--text-body); }

/* ----------------------------------------------------------------- Inputs -- */
.em-input,
.em-textarea {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  letter-spacing: -0.01em;
  color: var(--fg);
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.em-input::placeholder,
.em-textarea::placeholder { color: var(--fg-muted); }
.em-input:focus,
.em-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
.em-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg);
  margin-bottom: var(--space-2);
}

/* Search / pill input */
.em-input--pill { border-radius: var(--radius-pill); padding-left: 18px; padding-right: 18px; }

/* ------------------------------------------------------------------ Cards -- */
.em-card {
  background: var(--color-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.em-card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.em-card--subtle { background: var(--bg-subtle); border-color: transparent; }
.em-card--media { padding: 0; overflow: hidden; border-radius: var(--radius-xl); }

/* ----------------------------------------------------------------- Badges -- */
.em-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  background: var(--color-white);
}
.em-badge--accent { color: var(--color-accent-deep); background: var(--color-accent-tint); border-color: transparent; }
.em-badge--solid  { color: #fff; background: var(--color-black); border-color: transparent; }

.em-badge--dot::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Mono "spec" chip — for part numbers, data, codes */
.em-chip-mono {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--fg-secondary);
  background: var(--bg-inset);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- Dividers -- */
.em-divider { height: 1px; background: var(--border); border: 0; width: 100%; }

/* ---------------------------------------------------------------- Pills/Nav */
.em-pill-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.em-pill-nav button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.em-pill-nav button[aria-selected="true"],
.em-pill-nav button.is-active { background: var(--color-white); color: var(--fg); box-shadow: var(--shadow-sm); }