/* ISO Groep buttons 1.0.002 — canonical source; see README.md.
  Load AFTER Bootstrap and the app theme. Optional explicit iso-buttons.js API; no DOM rewriting.
   Website interaction; PDF colours; approved accessible light secondary. */
.theme-default {
  --iso-button-slot: 3rem;
  --iso-button-icon: 1rem;
  --iso-button-label-x: 1.5rem;
  --iso-button-label-y: .75rem;
  --iso-button-gap: 1px;
  --iso-button-motion: 350ms;
  --iso-button-colour-motion: 300ms;
  --iso-button-easing: cubic-bezier(.4, 0, .2, 1);
  --iso-button-secondary-hover-bg: #6a728233;
  --iso-button-disabled-bg: #e5e5e5;
  --iso-button-disabled-fg: #4d4d4d;
  --iso-button-disabled-border: #666;
  --iso-button-disabled-pattern: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 0 0 / 6%) 6px 7px);
  --iso-button-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.0769 0.707058L18 7.63013M18 7.63013L11.0769 14.5532M18 7.63013H0' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
  --iso-button-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M11.0769 0.707058L18 7.63013M18 7.63013L11.0769 14.5532M18 7.63013H0' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
}

/* Website Tailwind gray-500 at 20%; the token above is the legacy fallback. */
@supports (background-color: color-mix(in oklab, black 20%, transparent)) {
  .theme-default {
    --iso-button-secondary-hover-bg: color-mix(in oklab, oklch(55.1% .027 264.364) 20%, transparent);
  }
}

/* Bootstrap compatibility also covers controls inserted later or textContent changes.
   Navigation, tabs, accordion headers and utility/status controls are not CTAs. */
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)) {
  --iso-button-bg: var(--iso-blue, #006fba);
  --iso-button-fg: #fff;
  --iso-button-border: transparent;
  --iso-button-border-width: 0px;
  --iso-button-hover-bg: var(--iso-blue-dark, #03609f);
  --iso-button-hover-fg: #fff;
  --iso-button-hover-border: transparent;
  --iso-button-arrow: var(--iso-button-arrow-light);
  --iso-button-hover-arrow: var(--iso-button-arrow-light);
  --iso-button-left: 0rem;
  --iso-button-right: var(--iso-button-slot);
  --iso-button-left-opacity: 0;
  --iso-button-right-opacity: 1;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: var(--iso-button-label-y) calc(var(--iso-button-label-x) + var(--iso-button-right) + var(--iso-button-gap)) var(--iso-button-label-y) calc(var(--iso-button-label-x) + var(--iso-button-left) + var(--iso-button-gap));
  border: var(--iso-button-border-width) solid var(--iso-button-border);
  border-radius: 0;
  background: var(--iso-button-bg);
  color: var(--iso-button-fg);
  font-family: 'Kollektif', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  isolation: isolate;
  cursor: pointer;
  box-shadow: none;
  transition: padding var(--iso-button-motion) var(--iso-button-easing), background-color var(--iso-button-colour-motion) var(--iso-button-easing), color var(--iso-button-colour-motion) var(--iso-button-easing), border-color var(--iso-button-colour-motion) var(--iso-button-easing);
}

.theme-default :is(a, button):is(.btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .iso-button--secondary) {
  --iso-button-bg: transparent;
  --iso-button-fg: var(--iso-ink, #161616);
  --iso-button-border-width: 2px;
  --iso-button-border: var(--iso-blue-dark, #03609f);
  --iso-button-hover-bg: var(--iso-button-secondary-hover-bg);
  --iso-button-hover-fg: var(--iso-ink, #161616);
  --iso-button-hover-border: var(--iso-blue-dark, #03609f);
  --iso-button-arrow: var(--iso-button-arrow-dark);
  --iso-button-hover-arrow: var(--iso-button-arrow-dark);
}

/* Automatic dark secondary in the shared hero action area; explicit elsewhere. */
.theme-default .hero-actions :is(a, button):is(.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-secondary, .iso-button--secondary),
.theme-default :is(a, button).iso-button--secondary-dark {
  --iso-button-bg: rgb(255 255 255 / 15%);
  --iso-button-fg: #fff;
  --iso-button-border-width: 0px;
  --iso-button-hover-bg: #fff;
  --iso-button-hover-fg: #000;
  --iso-button-hover-border: transparent;
  --iso-button-arrow: var(--iso-button-arrow-light);
  --iso-button-hover-arrow: var(--iso-button-arrow-dark);
}

.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::before,
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--iso-button-arrow) center / var(--iso-button-icon) var(--iso-button-icon) no-repeat rgb(0 0 0 / 15%);
  pointer-events: none;
  transition: width var(--iso-button-motion) var(--iso-button-easing), opacity var(--iso-button-motion) var(--iso-button-easing);
}
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::before {
  left: 0;
  width: var(--iso-button-left);
  opacity: var(--iso-button-left-opacity);
  box-shadow: inset -1px 0 0 rgb(0 0 0 / 15%);
}
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::after {
  right: 0;
  width: var(--iso-button-right);
  opacity: var(--iso-button-right-opacity);
  box-shadow: inset 1px 0 0 rgb(0 0 0 / 15%);
}

/* Legacy label IDs keep their event/busy-state contracts; decorative spans can go. */
.theme-default .iso-button > :is(.button-label, #runLabel) { padding: 0; }
.theme-default .iso-button > .button-arrow { display: none; }

.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):not(:disabled, [disabled], [aria-disabled="true"], .disabled):focus-visible {
  --iso-button-left: var(--iso-button-slot);
  --iso-button-right: 0rem;
  --iso-button-left-opacity: 1;
  --iso-button-right-opacity: 0;
  background: var(--iso-button-hover-bg);
  color: var(--iso-button-hover-fg);
  border-color: var(--iso-button-hover-border);
  --iso-button-arrow: var(--iso-button-hover-arrow);
  outline: 3px solid var(--iso-blue, #006fba);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px #fff;
}
.theme-default .hero-actions :is(a, button):focus-visible,
.theme-default :is(a, button).iso-button--secondary-dark:focus-visible { outline-color: #fff; box-shadow: inset 0 0 0 2px #000; }

@media (hover: hover) {
  .theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):not(:disabled, [disabled], [aria-disabled="true"], .disabled):hover {
    --iso-button-left: var(--iso-button-slot);
    --iso-button-right: 0rem;
    --iso-button-left-opacity: 1;
    --iso-button-right-opacity: 0;
    background: var(--iso-button-hover-bg);
    color: var(--iso-button-hover-fg);
    border-color: var(--iso-button-hover-border);
    --iso-button-arrow: var(--iso-button-hover-arrow);
  }
}
/* aria-disabled styling does not prevent keyboard activation; the app must do so. */
.theme-default :is(button, a.btn, a.iso-button, a.iso-icon-button, a.copy-clipboard-btn, a.iso-button--utility):is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
  --iso-button-arrow: var(--iso-button-arrow-dark);
  --iso-button-left: 0rem;
  --iso-button-right: var(--iso-button-slot);
  --iso-button-left-opacity: 0;
  --iso-button-right-opacity: 1;
  background-color: var(--iso-button-disabled-bg);
  background-image: var(--iso-button-disabled-pattern);
  color: var(--iso-button-disabled-fg);
  border-color: var(--iso-button-disabled-border);
  box-shadow: inset 0 0 0 2px var(--iso-button-disabled-border);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transition: none;
}
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is(:disabled, [disabled], [aria-disabled="true"], .disabled)::before,
.theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is(:disabled, [disabled], [aria-disabled="true"], .disabled)::after { transition: none; }
.theme-default :is(button, a.btn, a.iso-button, a.iso-icon-button, a.copy-clipboard-btn, a.iso-button--utility):is(:disabled, [disabled], [aria-disabled="true"], .disabled):focus-visible {
  outline: 3px solid var(--iso-blue, #006fba);
  outline-offset: 3px;
}
.theme-default .hero-actions :is(button, a.btn, a.iso-button, a.iso-icon-button, a.copy-clipboard-btn, a.iso-button--utility):is(:disabled, [disabled], [aria-disabled="true"], .disabled):focus-visible,
.theme-default :is(button, a.btn, a.iso-button, a.iso-icon-button, a.copy-clipboard-btn, a.iso-button--utility).iso-button--secondary-dark:is(:disabled, [disabled], [aria-disabled="true"], .disabled):focus-visible {
  outline-color: #fff;
}
/* Explicit action state wins over disabled/hover/focus, including hero variants.
   [class] adds specificity without IDs or !important. Slot totals stay 3rem.
   Only the 1rem spinner rotates, never the slot or label. */
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="busy"], [aria-busy="true"], [data-iso-button-state="success"], [data-iso-button-state="error"]) {
  background-color: var(--iso-blue, #006fba);
  background-image: none;
  color: #fff;
  border-color: var(--iso-blue, #006fba);
  box-shadow: none;
  opacity: 1;
  transition: none;
  --iso-button-left: var(--iso-button-slot);
  --iso-button-right: 0rem;
  --iso-button-left-opacity: 1;
  --iso-button-right-opacity: 0;
}
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="success"], [data-iso-button-state="error"]) {
  --iso-button-left: 0rem;
  --iso-button-right: var(--iso-button-slot);
  --iso-button-left-opacity: 0;
  --iso-button-right-opacity: 1;
  --iso-button-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M2 8l5 5L18 2' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))[data-iso-button-state="error"] {
  --iso-button-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M4 2L16 14M16 2L4 14' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="busy"], [aria-busy="true"])::before {
  top: 50%;
  bottom: auto;
  left: calc((var(--iso-button-slot) - var(--iso-button-icon)) / 2);
  width: var(--iso-button-icon);
  height: var(--iso-button-icon);
  margin-top: calc(var(--iso-button-icon) / -2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8' stroke='white' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M10 2a8 8 0 0 1 8 8' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  opacity: 1;
  transition: none;
  animation: iso-button-spin 900ms linear infinite;
}
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="busy"], [aria-busy="true"], [data-iso-button-state="success"], [data-iso-button-state="error"])::after,
.theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="success"], [data-iso-button-state="error"])::before { transition: none; }
@keyframes iso-button-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-default button[class]:is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)):is([data-iso-button-state="busy"], [aria-busy="true"])::before { animation: none; transition: none; }
  .theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success)),
  .theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::before,
  .theme-default :is(a, button):is(.iso-button, .btn-primary, .btn-dark, .btn-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary):where(:not(.iso-icon-button, .copy-clipboard-btn, .iso-button--utility, .btn-close, .btn-danger, .btn-warning, .btn-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-success))::after { transition: none; }
}
