/**
 * <sensitive-field>, paired styles for the shared web component
 * defined in ~/projects/abundera-shared/site-js/sensitive-field.js.
 *
 * Synced into each consumer's site/css/lib/sensitive-field.css via
 * scripts/sync-shared.sh. Load via:
 *
 *   <link rel="stylesheet" href="/css/lib/sensitive-field.css?v=202606200810">
 *
 * CSP-safe: no inline styles. Designed to inherit color tokens from
 * the host page (var(--text), var(--text-muted), var(--accent)) with
 * sensible fallbacks for surfaces that don't expose them.
 */

sensitive-field {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.375rem;
  background: rgba(148, 163, 184, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  vertical-align: baseline;
  max-width: 100%;
}

.sensitive-field-value {
  display: inline-block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text, inherit);
  user-select: text;
  -webkit-user-select: text;
  padding: 0 0.125rem;
}

.sensitive-field-value-masked {
  letter-spacing: 0.1em;
  color: var(--text-muted, #6b7280);
}

.sensitive-field-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
  flex: 0 0 auto;
}
.sensitive-field-btn:hover {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text, inherit);
}
.sensitive-field-btn:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 1px;
}
.sensitive-field-btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

.sensitive-field-copied {
  color: var(--accent, #10b981) !important;
}

/* Honor reduced-motion: no transitions for users who ask for none. */
@media (prefers-reduced-motion: reduce) {
  .sensitive-field-btn { transition: none; }
}