/* Scoped component: existing site buttons are unchanged until adoption. */
.owl-button-track {
  display: inline-flex;
  padding: 1px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--owl-button-track, var(--surface-night));
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--black) 60%, transparent);
  vertical-align: middle;
}
.owl-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  min-width: 48px;
  max-width: 100%;
  padding: 11px 24px;
  border: 1px solid var(--owl-button-rim, var(--rim-light));
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--owl-button-top, var(--surface-wine)) 0%,
    var(--owl-button-bottom, var(--surface-page)) 100%
  );
  color: var(--owl-button-label, var(--text-on-dark));
  font:
    600 17px/24px 'Figtree',
    system-ui,
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 -1px 1px color-mix(in srgb, var(--black) 20%, transparent);
  transition:
    transform 100ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
  overflow: hidden;
}
@property --owl-rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.owl-button:hover:not(:disabled):not([aria-disabled='true']),
.owl-button:focus-visible,
.owl-button[data-preview='hover'] {
  color: var(--owl-button-label, var(--text-on-dark));
  transform: none;
  border-color: transparent;
  background:
    linear-gradient(
        180deg,
        var(--owl-button-top, var(--surface-wine)) 0%,
        var(--owl-button-bottom, var(--surface-page)) 100%
      )
      padding-box,
    conic-gradient(
        from var(--owl-rim-angle),
        var(--owl-button-rim, var(--rim-light)) 0deg,
        var(--owl-button-rim, var(--rim-light)) 210deg,
        var(--owl-button-accent, var(--accent)) 250deg,
        var(--owl-button-light, var(--accent-glow)) 290deg,
        var(--owl-button-accent, var(--accent)) 315deg,
        var(--owl-button-rim, var(--rim-light)) 350deg
      )
      border-box;
  box-shadow: inset 0 -1px 1px color-mix(in srgb, var(--black) 20%, transparent);
  animation: owl-button-rim-sweep 1.8s linear infinite;
}
@keyframes owl-button-rim-sweep {
  from {
    --owl-rim-angle: 0deg;
  }
  to {
    --owl-rim-angle: 360deg;
  }
}

.owl-button:active:not(:disabled),
.owl-button[data-preview='pressed'] {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px color-mix(in srgb, var(--black) 33%, transparent);
}
.owl-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.owl-button:disabled,
.owl-button[aria-disabled='true'] {
  cursor: not-allowed;
  background: var(--owl-button-bottom, var(--surface-deep));
  color: var(--owl-button-label, var(--text-on-dark));
  box-shadow: none;
  border-style: dashed;
  transform: none;
}
.owl-button[aria-busy='true'] {
  cursor: progress;
  border-style: solid;
}
.owl-button-icon {
  display: inline-flex;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.owl-button-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
.owl-button-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.owl-button-spinner {
  animation: owl-button-spin 0.7s linear infinite;
}
@keyframes owl-button-spin {
  to {
    transform: rotate(360deg);
  }
}
.owl-button-specimens {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.owl-button-specimens figure {
  display: grid;
  gap: 12px;
  margin: 0;
  max-width: 100%;
}
.owl-button-specimens figcaption {
  font:
    500 14px/1.4 'Figtree',
    sans-serif;
  color: var(--text-soft-on-dark);
}
@media (prefers-reduced-motion: reduce) {
  .owl-button {
    transition: none;
    animation: none !important;
  }
  .owl-button-spinner {
    animation: none;
  }
}
[data-motion='off'] .owl-button {
  transition: none;
  animation: none !important;
}
[data-motion='off'] .owl-button-spinner {
  animation: none;
}

/* Light stays on the upper face; cast shadow belongs to the outer track. */
.owl-button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--owl-button-highlight, color-mix(in srgb, var(--text-on-dark) 25%, transparent)),
    transparent
  );
}
.owl-button-track:has(.owl-button:active),
.owl-button-track:has([data-preview='pressed']) {
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--black) 53%, transparent);
}
.owl-button-track:has(.owl-button:disabled):not(:has([aria-busy='true'])) {
  box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--black) 40%, transparent);
}

/* Adoption overrides legacy component sizes and inline colours. */
.owl-button[data-owl-adopted] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 11px 24px !important;
  gap: 10px !important;
  border: 1px solid var(--owl-button-rim, var(--rim-light)) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    var(--owl-button-top, var(--surface-wine)),
    var(--owl-button-bottom, var(--surface-page))
  ) !important;
  color: var(--owl-button-label, var(--text-on-dark)) !important;
  font:
    600 17px/24px 'Figtree',
    system-ui,
    sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow:
    0 8px 24px -8px color-mix(in srgb, var(--black) 53%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--white) 15%, transparent) !important;
  transition:
    transform 100ms ease,
    box-shadow 200ms ease !important;
  text-align: center;
  text-decoration: none !important;
}
.owl-button[data-owl-adopted]:hover:not(:disabled),
.owl-button[data-owl-adopted]:focus-visible {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, var(--owl-button-top, var(--surface-wine)), var(--owl-button-bottom, var(--surface-page)))
      padding-box,
    conic-gradient(
        from var(--owl-rim-angle),
        var(--owl-button-rim, var(--rim-light)) 0deg,
        var(--owl-button-rim, var(--rim-light)) 210deg,
        var(--owl-button-accent, var(--accent)) 250deg,
        var(--owl-button-light, var(--accent-glow)) 290deg,
        var(--owl-button-accent, var(--accent)) 315deg,
        var(--owl-button-rim, var(--rim-light)) 350deg
      )
      border-box !important;
  transform: none !important;
}
.owl-button[data-owl-adopted]:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow:
    0 4px 12px -5px color-mix(in srgb, var(--black) 53%, transparent),
    inset 0 2px 3px color-mix(in srgb, var(--black) 33%, transparent) !important;
}
.owl-button[data-owl-adopted]:disabled {
  background: var(--owl-button-bottom, var(--surface-deep)) !important;
  border-style: dashed !important;
  box-shadow: none !important;
}
.owl-button[data-owl-adopted][aria-busy='true'] {
  border-style: solid !important;
}
.owl-full-map-button.owl-button,
.owl-map-place-details > summary.owl-button {
  display: flex;
}
.owl-map-place-details > summary.owl-button::before {
  content: none;
}
.owl-map-place-details > summary.owl-button .owl-button-icon {
  transition: rotate 100ms ease;
}
.owl-map-place-details[open] > summary.owl-button .owl-button-icon {
  rotate: 90deg;
}
@media (prefers-reduced-motion: reduce) {
  .owl-button[data-owl-adopted] {
    transition: none !important;
  }
}
[data-motion='off'] .owl-button[data-owl-adopted] {
  transition: none !important;
}