/* buttons — <button> and submit/reset inputs are styled by default; .btn is for links/spans */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .4em 1em;
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-full);
  font-family: var(--m-font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  background: var(--m-bg);
  color: var(--m-fg);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--m-dur), color var(--m-dur), border-color var(--m-dur), box-shadow var(--m-dur), filter var(--m-dur);
}
button:hover, .btn:hover,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
  background: var(--m-surface);
  border-color: var(--m-border-2);
  text-decoration: none;
}
button:active, .btn:active,
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active { background: var(--m-border); }
button:disabled, .btn:disabled, .btn[disabled],
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--m-primary);
  border-color: transparent;
  color: var(--m-on-primary);
}
.btn-primary:hover {
  background: var(--m-primary-h);
  border-color: transparent;
}
.btn-primary:active {
  background: var(--m-primary-a);
  border-color: transparent;
}
.btn-dark {
  background: var(--m-fg);
  border-color: transparent;
  color: var(--m-bg);
}
.btn-dark:hover { background: var(--m-fg); opacity: .88; border-color: transparent; }
.btn-dark:active { opacity: .78; }
.btn-light { background: var(--m-bg); color: var(--m-fg); border-color: var(--m-border); }
.btn-light:hover { background: var(--m-surface); }
.btn-light:active { background: var(--m-border); }
.btn-success {
  background: var(--m-success);
  border-color: transparent;
  color: var(--m-on-success);
}
.btn-success:hover { background: var(--m-success); border-color: transparent; filter: brightness(1.06); }
.btn-success:active { background: var(--m-success); filter: brightness(.94); }
.btn-danger {
  background: var(--m-danger);
  border-color: transparent;
  color: var(--m-on-danger);
}
.btn-danger:hover { background: var(--m-danger); border-color: transparent; filter: brightness(1.06); }
.btn-danger:active { background: var(--m-danger); filter: brightness(.94); }
.btn-warning {
  background: var(--m-warning);
  border-color: transparent;
  color: var(--m-on-warning);
}
.btn-warning:hover { background: var(--m-warning); border-color: transparent; filter: brightness(1.06); }
.btn-warning:active { background: var(--m-warning); filter: brightness(.94); }
.btn-outline {
  background: transparent;
  border-color: var(--m-border-2);
  color: var(--m-primary);
}
.btn-outline:hover {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
}
.btn-outline:active {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: var(--m-on-primary);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--m-fg-2);
}
.btn-ghost:hover {
  background: var(--m-surface);
  border-color: transparent;
  color: var(--m-fg);
}
.btn-ghost:active { background: var(--m-border); }
.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--m-primary);
  padding-inline: .2em;
  overflow: visible;
}
.btn-link:hover { background: transparent; border-color: transparent; text-decoration: underline; }
.btn-link:active { background: transparent; }

/* soft fill — modern default for emphasis without a hard slab */
.btn-soft {
  background: var(--m-primary-soft);
  border-color: transparent;
  color: var(--m-primary);
}
.btn-soft:hover {
  background: var(--m-primary-soft-2);
  border-color: transparent;
}
.btn-soft:active {
  background: var(--m-primary-soft-3);
}

.btn-elevated {
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 10px rgba(16,24,40,.06);
}
.btn-elevated:hover { filter: none; }
.btn-elevated:active {
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.btn-elevated.btn-primary:hover { background: var(--m-primary-h); }
.btn-elevated.btn-primary:active { background: var(--m-primary-a); }

:is(.tab, .menu-item, .seg-item, .list-item, .chip):is(:hover, :active) {
  box-shadow: none;
}
.tab, .menu-item, .seg-item, .list-item { overflow: visible; }

/* centered ripple — click origin needs JS; this expands from the middle on release */
button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before,
.btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle, currentColor 12%, transparent 12.01%) center / 1400% 1400% no-repeat;
  opacity: 0;
  transition: background-size .45s ease-out, opacity .55s ease-out;
}
button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab):active::before,
.btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab):active::before {
  background-size: 0 0;
  opacity: .22;
  transition: background-size 0s, opacity 0s;
}

.btn-sm { padding: .28em .75em; font-size: 1rem; }
.btn-lg { padding: .55em 1.2em; font-size: 1.125rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  line-height: 1;
  border-radius: var(--m-r);
}
.btn-icon.btn-sm { width: 1.85rem; height: 1.85rem; min-width: 1.85rem; }
.btn-icon.btn-lg { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; }
.btn-group { display: inline-flex; }
.btn-group button, .btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group button:first-child, .btn-group .btn:first-child { border-radius: var(--m-r-full) 0 0 var(--m-r-full); margin-left: 0; }
.btn-group button:last-child, .btn-group .btn:last-child { border-radius: 0 var(--m-r-full) var(--m-r-full) 0; }

.btn-spin::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: m-spin .6s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

.btn-close {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
  position: relative;
  box-shadow: none;
}
.btn-close::before, .btn-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { background: var(--m-border); }
.btn-close:active { background: var(--m-border-2); }

.fab {
  width: 3.25rem;
  height: 3.25rem;
  min-width: 3.25rem;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  background: var(--m-primary);
  color: var(--m-on-primary);
  box-shadow: var(--m-elev);
  font-size: 1.35rem;
  line-height: 1;
}
.fab:hover { background: var(--m-primary-h); border-color: transparent; color: var(--m-on-primary); }
.fab:active { background: var(--m-primary-a); }
.fab.fixed {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--m-z-sticky);
}

@media (prefers-reduced-motion: reduce) {
  button, .btn { transition: background var(--m-dur), color var(--m-dur), border-color var(--m-dur); }
  button:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before,
  .btn:not(.btn-close, .btn-link, .tab, .menu-item, .seg-item, .list-item, .pass-toggle, .num-btn, .fab)::before { content: none; }
}