/* button.css — pills and text links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tap-target);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.btn:hover { text-decoration: none; }

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

.btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--secondary:hover { background: var(--accent); color: #fff; }

/* On dark media: white filled + white outline */
.btn--on-dark { background: var(--text-on-dark); color: var(--bg-dark); border-color: var(--text-on-dark); }
.btn--on-dark:hover { background: #fff; }
.btn--on-dark-outline { background: transparent; color: var(--text-on-dark); border-color: var(--text-on-dark); }
.btn--on-dark-outline:hover { background: var(--text-on-dark); color: var(--bg-dark); }

.btn--sm {
  min-height: 28px;
  padding: 4px var(--space-3);
  font-size: var(--fs-fine);
}

.link { color: var(--accent); }
.link::after { content: " \203A"; }           /* › */
.link--external::after { content: " \2197"; } /* ↗ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: center;
}

/* Round control: carousel chevrons and card expanders */
.round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
  transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.round:hover { opacity: 0.85; }
.round--translucent { background: var(--control-bg); color: var(--text); }