/* Shared UI components — the one place button styles live so they're consistent
   across the viewer, editor, admin, and settings. Relies on each host page's
   design tokens; falls back if a token is missing.

   Site convention: uppercase, slightly tracked. Default = ghost (outline);
   .primary = accent fill; .danger = red outline; .tiny / .icon size modifiers. */
.btn {
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-sm, 6px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--muted, #8b93a4);
  border: 1px solid var(--border-strong, rgba(255,255,255,.18));
  transition: color .12s, border-color .12s, filter .12s, background .12s;
}
.btn:hover:not(:disabled) { color: var(--fg, #d2d6df); border-color: var(--border-strong-hi, rgba(255,255,255,.4)); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent, #2d6bbf); color: #fff; border-color: var(--accent, #2d6bbf); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn.danger { color: #ff8a90; border-color: var(--danger, #e0454e); }
.btn.danger:hover:not(:disabled) { background: rgba(224,69,78,.12); }
.btn.tiny { font-size: 10px; padding: 4px 9px; letter-spacing: .06em; }
.btn.icon { padding: 0; width: 26px; height: 26px; }
.btn.lg { padding: 11px 22px; border-radius: 8px; letter-spacing: .08em; }   /* hero CTAs */

/* Text fields — inputs, textareas, selects. One source so every form box shares
   the same surface, border, radius, and focus treatment. Was forked 6 ways
   (3/5/6/8px radii, 5 backgrounds, 4 focus styles) across the pages.
   (Named .input, not .field — several pages already use .field for row groups.) */
.input {
  font: 13px/1.4 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--fg, #d2d6df);
  background: var(--card-hi, var(--field-bg, var(--card, #12151c)));
  border: 1px solid var(--border-strong, var(--border, rgba(255,255,255,.14)));
  border-radius: var(--r-sm, 6px);
  padding: 7px 10px; outline: none; box-sizing: border-box;
  transition: border-color .12s, background .12s;
}
.input:focus { border-color: var(--border-strong-hi, var(--border-hi, var(--accent, #2d6bbf))); }
.input::placeholder { color: var(--muted, #8b93a4); }
.input.tiny { font-size: 11px; padding: 4px 8px; }
textarea.input { resize: vertical; }
/* Filter / search box: placeholder reads uppercase to match the site voice. */
.input.filter { letter-spacing: .05em; }
.input.filter::placeholder { text-transform: uppercase; letter-spacing: .08em; }

/* Status pill — small uppercase mono tag. Base only; pages add their own
   semantic color variants (e.g. .pill.live green, .pill.plan amber) since those
   colors are page-specific. Was duplicated as .pill (docs) and .soon (help). */
.pill {
  display: inline-block;
  font: 600 10px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-hi, var(--border-strong, rgba(255,255,255,.18)));
  color: var(--muted, #8b93a4);
}