/* One public action component. Page layouts still own width and visibility.
   Primary/secondary share geometry and motion; only their colour tokens differ. */
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print) {
  --button-fill: transparent;
  --button-ink: var(--button-primary, #000);
  --button-frame: var(--button-primary-frame, #c59d59);
  --button-segment: 62%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  height: auto;
  max-width: 100%;
  padding: 12px 24px;
  border: 0;
  border-radius: 0;
  background: var(--button-fill);
  color: var(--button-ink);
  font: 500 1rem/1.35 var(--font-body);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
  cursor: pointer;
  animation: none;
  transition: background-color 180ms ease, color 180ms ease;
}
/* The menu trigger keeps its responsive display and compact icon layout. */
.site-header .nav-toggle {
  --button-fill: transparent;
  --button-ink: #000;
  --button-frame: #c59d59;
  --button-segment: 62%;
  position: relative;
  border: 0;
  border-radius: 0;
  color: var(--button-ink);
  box-shadow: none;
}
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--button-frame), var(--button-frame)) center top / var(--button-segment) 1px no-repeat,
    linear-gradient(var(--button-frame), var(--button-frame)) center bottom / var(--button-segment) 1px no-repeat,
    linear-gradient(var(--button-frame), var(--button-frame)) left center / 1px var(--button-segment) no-repeat,
    linear-gradient(var(--button-frame), var(--button-frame)) right center / 1px var(--button-segment) no-repeat;
  border: 0;
  border-radius: 0;
  opacity: 1;
  transform: none;
  animation: none;
  transition: background-size 180ms ease;
}
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle)::after { content: none; }
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle):is(:hover,:focus-visible) {
  --button-segment: 88%;
  background: var(--button-fill);
  color: var(--button-ink);
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle):focus-visible {
  outline: 2px solid var(--button-focus, #000);
  outline-offset: 5px;
}
/* Secondary: the same segmented frame on the surrounding surface. */
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print):is(.button-ghost,.articles-clear,#checklist-print) {
  --button-fill: transparent;
  --button-ink: var(--button-secondary, #000);
  --button-frame: var(--button-secondary-frame, #c59d59);
}
:is(.home-editorial-hero,.guide-conversion-band,.visa-dark,.nux-dark,.resource-result-panel,.question-overlay-page) {
  --button-secondary: #fff;
  --button-primary: #c59d59;
  --button-primary-frame: #fff;
  --button-secondary-frame: #c59d59;
  --button-focus: #fff;
}
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print):is(:disabled,[aria-disabled="true"]) {
  --button-fill: transparent;
  --button-ink: var(--button-secondary, #000);
  --button-frame: #c59d59;
  --button-segment: 62%;
  cursor: not-allowed;
  opacity: 1;
}
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print):is(:disabled,[aria-disabled="true"])::before { transition: none; }
/* Preserve real hidden/step states, including print and questionnaire controls. */
body :is(.button, .articles-search-btn, .articles-clear, #checklist-print)[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle),
  body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle)::before { transition: none; }
}
@media (forced-colors: active) {
  body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle) { border: 1px solid ButtonText; }
  body :is(.button, .articles-search-btn, .articles-clear, #checklist-print, .nav-toggle)::before { content: none; }
}
@media (min-width: 1081px) {
  body :is(.button, .articles-search-btn, .articles-clear, #checklist-print) { font-size: 1.125rem; }
}