/*
 * The button family, shared by every page that has one.
 *
 * Extracted for the same reason as tokens.css: app-home.css and landing.css each carried an
 * identical `.btn`/`.btn-primary`, `.btn-ghost` existed twice in two slightly different
 * forms, and the meeting page had none of them — which is why it grew its own `.pi-btn` and
 * `.about-copy-btn` rather than reach for a family it could not see.
 *
 * Needs tokens.css. Landing keeps one `.btn-ghost` override of its own; see landing.css.
 */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
  line-height: 1;
}

/* A <button> brings its own font; a styled <a> does not.
 *
 * It brings its own border too, but .btn above already replaces that — and declaring the
 * `border` shorthand here as well used to silently beat `.btn-ghost`'s `border-color`
 * (`button.btn` is the more specific selector), so every ghost <button> in the app came out
 * borderless while every ghost <a> came out bordered. */
button.btn { font-family: inherit; }

.btn-primary {
  background: linear-gradient(135deg, var(--c-grad-start) 0%, var(--c-grad-end) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { transform: translateY(-1px); opacity: 0.95; }

.btn-ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: var(--c-border);
}

.btn-ghost:hover { background: var(--c-surface-soft); color: var(--c-ink); }

.btn-sm { padding: 7px 12px; font-size: 13px; }

/* Square enough for a single glyph — the copy-link button in the meeting room's About card,
   where .btn-sm's side padding would leave it looking like a word with no word in it. */
.btn-icon { padding: 6px 8px; font-size: 13px; gap: 0; }

.btn-xl {
  margin-top: 32px;
  padding: 18px 36px;
  font-size: 18px;
  border-radius: 10px;
}

.btn-plus {
  font-weight: 300;
  font-size: 22px;
  line-height: 0;
  margin-right: 2px;
}

/* Carried over from the meeting room's .pi-btn, which had it. No background reset here:
   it would outrank .btn-primary's gradient and blank a disabled primary button. */
.btn:disabled { opacity: 0.6; cursor: default; }
.btn:disabled:hover { transform: none; }