/* Shared button types. Typography owns text size; grouping owns width. */
:is(.action-button,.info-button,.nav-button,.dark-button) {
  --control-bg: #fff;
  --control-ink: #303740;
  --control-border: #c8cdd3;
  --control-hover-bg: #f0f1f3;
  --control-hover-border: #939ba5;
  --control-focus: #155b91;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  max-width: 100%;
  min-height: 36px;
  padding: .5em .9em;
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: var(--control-bg);
  color: var(--control-ink);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
  &:visited { color: var(--control-ink); }
  &:is(:hover, [aria-pressed="true"]):not(:disabled, [aria-disabled="true"]) {
    background: var(--control-hover-bg);
    border-color: var(--control-hover-border);
    color: var(--control-ink);
    text-decoration: none;
  }
  &:focus-visible {
    outline: 3px solid var(--control-focus);
    outline-offset: 3px;
  }
  &:active:not(:disabled, [aria-disabled="true"]) { filter: brightness(.96); }
  &:is(:disabled, [aria-disabled="true"]) { opacity: .6; cursor: not-allowed; }
  &.compact { min-height: 28px; padding: .25em .6em; }
  &.button-icon { flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; padding: 0; }
  &.button-icon.compact { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  &.is-copied { --control-ink: #205c2e; --control-border: #78a985; }
  &.is-copy-error { --control-ink: #842d2d; --control-border: #c28282; }

}
.info-button {
  --control-bg: #eef5fb;
  --control-ink: #155b91;
  --control-border: #94b8d6;
  --control-hover-bg: #dcecf8;
  --control-hover-border: #477fa9;
}
.nav-button {
  --control-bg: #fff2e7;
  --control-ink: #8b3d05;
  --control-border: #d3a47e;
  --control-hover-bg: #ffe2c9;
  --control-hover-border: #a6642f;
}
.dark-button {
  --control-bg: transparent;
  --control-ink: #fff;
  --control-border: #ffffffc9;
  --control-hover-bg: #ffffff1f;
  --control-hover-border: #fff;
  --control-focus: #fff;
}
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.button-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.button-stack > :is(.action-button,.info-button,.nav-button,.dark-button), .button-stack > form, .button-stack > form > :is(.action-button,.info-button,.nav-button,.dark-button) { width: 100%; min-width: 0; }

a.pill:focus-visible, .pill-link:focus-visible { outline: 3px solid #155b91; outline-offset: 3px; }

/* A pill is a label; a link or button supplies interaction, never a clickable span. */
:is(a, button, span).pill {
  --pill-bg: #f5f5f5;
  --pill-border: #d2d2d2;
  --pill-ink: #2c2c2c;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  justify-self: start;
  align-self: center;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  text-decoration: none;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.pill.pill--approved { --pill-bg: #e7f5ea; --pill-border: #78a985; --pill-ink: #205c2e; }
.pill.pill--unapproved { --pill-bg: #f8f8f8; --pill-border: #d8d8d8; --pill-ink: #626262; }
.pill.pill--subfield { --pill-bg: #f0e68c; --pill-border: #d1c86a; --pill-ink: #202020; }
.pill.pill--data { --pill-bg: #424242; --pill-border: #303030; --pill-ink: #fff; }
.pill.pill--dataverse { --pill-bg: #9c441b; --pill-border: #873a17; --pill-ink: #fff; }
.pill.pill--year { --pill-bg: #ffd700; --pill-border: #c6a800; --pill-ink: #202020; }
.pill.pill--journal { --pill-bg: #426d49; --pill-border: #426d49; --pill-ink: #fff; }
a.pill, button.pill, .pill-link .pill { min-height: 24px; }
a.pill, button.pill, a.pill-link { cursor: pointer; }
a.pill:visited { color: var(--pill-ink); }
a.pill:hover, button.pill:hover, .pill-link:hover .pill { filter: brightness(.95); text-decoration: none; }
.pill-link { display: inline-flex; justify-self: start; max-width: 100%; text-decoration: none; border-radius: 999px; }
.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pill-count { font-size: .9em; color: inherit; }

@media (prefers-reduced-motion: reduce) { :is(.action-button,.info-button,.nav-button,.dark-button) { transition: none; } }
@media (forced-colors: active) {
  :is(.action-button,.info-button,.nav-button,.dark-button), .pill { border-color: ButtonText; }
  :is(.action-button,.info-button,.nav-button,.dark-button):focus-visible, a.pill:focus-visible, .pill-link:focus-visible { outline-color: Highlight; }
}