/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-13);
  font-weight: var(--w-600);
  background: var(--paper);
  color: var(--ink-800);
  border: 1px solid var(--ink-100);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast);
}

.btn:hover { background: var(--ink-025); border-color: var(--ink-200); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: not-allowed; opacity: 0.6; }

.btn .ic { width: 14px; height: 14px; }

/* Variants */
.btn--primary { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.btn--primary:hover { background: var(--ink-700); border-color: var(--ink-700); }

.btn--accent { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.btn--accent:hover { background: var(--brand-600); border-color: var(--brand-600); }

.btn--danger { background: var(--paper); color: var(--err-ink); border-color: var(--err-soft); }
.btn--danger:hover { background: var(--err-soft); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-500); }
.btn--ghost:hover { background: var(--ink-050); color: var(--ink-800); border-color: transparent; }

/* Ghost variant for use inside the dark rail */
.btn--rail-ghost { background: transparent; border-color: transparent; color: rgba(255,255,255,0.4); }
.btn--rail-ghost:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border-color: transparent; }

/* Sizes */
.btn--sm { padding: 5px 10px; font-size: var(--t-12); }

/* Version / SHA copy button (used in the light topbar) */
.nav-copy-btn {
  border: 1px solid var(--ink-100);
  background: var(--paper);
  color: var(--ink-400);
  font-size: var(--t-11);
  font-weight: var(--w-500);
  font-family: var(--font-mono);
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.nav-copy-btn__short {
  display: none;
}

.nav-copy-btn:hover {
  background: var(--ink-050);
  border-color: var(--ink-200);
  color: var(--ink-700);
}

/* Version label (light topbar) */
.nav-version {
  font-size: var(--t-11);
  font-weight: var(--w-400);
  color: var(--ink-400);
  font-family: var(--font-mono);
}

@media (max-width: 420px) {
  .nav-copy-btn__full {
    display: none;
  }

  .nav-copy-btn__short {
    display: inline;
  }
}