/* ---------- COMPONENTS: BUTTONS ---------- */
/* Buttons: Primary = main action, Secondary = supporting, Destructive = irreversible, Tertiary = low emphasis */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  box-sizing: border-box;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.btn:active:not(:disabled):not([disabled]) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.btn-primary {
  background: var(--accent-color);
  color: var(--text-inverse);
  border-color: var(--accent-color);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.btn-primary:hover {
  background: var(--accent-color-hover);
  border-color: var(--accent-color-hover);
}

.btn-secondary {
  background: var(--surface-0);
  color: var(--text-strong);
  border-color: var(--border-input);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.btn-secondary:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
}

.btn-tertiary {
  background: transparent;
  color: var(--text-emphasis);
  border-color: transparent;
}

.btn-tertiary:hover {
  background: var(--surface-tint-subtle);
  color: var(--text-strong);
}

.btn-destructive {
  background: var(--danger-bg);
  color: var(--text-inverse);
  border-color: var(--danger-bg);
}

.btn-destructive:hover {
  background: var(--danger-bg-hover);
  border-color: var(--danger-bg-hover);
}

.btn-pill {
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-weight: 500;
  background: var(--surface-0);
  color: var(--text-secondary);
  border-color: var(--border-input);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-pill:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
  color: var(--text-strong);
}

.btn-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.btn-pill.is-active {
  background: var(--accent-color);
  color: var(--text-inverse);
  border-color: var(--accent-color);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.16);
}

.btn-block {
  width: 100%;
}

.btn-menu {
  justify-content: flex-start;
}

.filter-pill {
  font-size: 12px;
  line-height: 1.15;
  padding: 0.34rem 0.78rem;
  white-space: nowrap;
}

body.signed-in-app .app-main a.btn-pill {
  color: var(--text-secondary);
}

body.signed-in-app .app-main a.btn-pill:hover {
  color: var(--text-strong);
}

body.signed-in-app .app-main a.btn-pill.is-active,
body.signed-in-app .app-main a.btn-pill.is-active:hover {
  color: var(--text-inverse);
}