/* --- Buttons --- */
/* Tailwind-preflight-style global reset so a bare <button> matches an <a>
   in chrome — no UA background-color, border, or font-family bleeding through.
   The legacy ui/ pulled this in via @tailwind base; the Vue port did not. */
button {
  background-color: transparent;
  background-image: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn {
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn:disabled {
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--accent-hover);
}
.btn-yellow {
  background: #b07820;
  color: #fff;
}
.btn-yellow:hover {
  background: #8a5c18;
}
.btn-green {
  background: #2a8050;
  color: #fff;
}
.btn-green:hover {
  background: #20643e;
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
}
.btn-ghost:hover {
  color: var(--text);
}
.btn-dashed {
  width: 100%;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: var(--fs-md);
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
}
.btn-dashed:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--bg-hover);
}
.btn-danger {
  color: #b02828;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.btn-danger:hover {
  color: #8a1e1e;
}
[data-theme="dark"] .btn-danger {
  color: #e07070;
}
[data-theme="dark"] .btn-danger:hover {
  color: #e89090;
}
