/*
 * Native back-to-top control for the Drysdale Leopold Pony Club website.
 *
 * Replaces the Elfsight widget, whose account is domain-locked to the old
 * SportsWeb site and which therefore renders nothing here.
 *
 * Deliberately independent of the SportsWeb layout engine:
 *   - position: fixed, appended to <body>, so the platform never measures it
 *   - no .ww_element / .dlpc-form class, so it is excluded from the readiness
 *     geometry fingerprint in dlpc-forms.js and cannot delay or destabilise it
 *   - it changes no other element's box, so the visual baseline is unaffected
 * The same reasoning that was learned the hard way with the footer form: do not
 * hand this platform anything new to lay out.
 *
 * Tokens match the extracted site palette:
 *   #00543D brand green · #008A4A button green · #F3C651 gold accent
 */
.dlpc-backtotop {
  /* 48px square: meets the 24px minimum touch target with room to spare, which
     the inherited footer controls do not. */
  --dlpc-btt-size: 48px;
  position: fixed;
  z-index: 2147483000;        /* above the platform's own stacking contexts */
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: var(--dlpc-btt-size);
  height: var(--dlpc-btt-size);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #00543D;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* Hidden state. Driven by a data attribute rather than [hidden] so the fade
     can play out; pointer-events + visibility keep it out of the tab order and
     away from the pointer while invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background-color .18s ease;
}
.dlpc-backtotop[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dlpc-backtotop:hover,
.dlpc-backtotop:focus-visible { background: #008A4A; }
.dlpc-backtotop:focus-visible {
  outline: 3px solid #F3C651;
  outline-offset: 2px;
}
.dlpc-backtotop:active { transform: translateY(1px); }
.dlpc-backtotop svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;   /* clicks always land on the button itself */
}

/* Small screens: slightly tighter inset so it never crowds the viewport edge,
   while keeping the full 48px target. */
@media (max-width: 479px) {
  .dlpc-backtotop {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }
}

/* Coarse pointers get a marginally larger target. */
@media (hover: none) and (pointer: coarse) {
  .dlpc-backtotop { --dlpc-btt-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .dlpc-backtotop {
    transition: opacity .01s linear, visibility .01s linear;
    transform: none;
  }
  .dlpc-backtotop[data-visible="true"] { transform: none; }
  .dlpc-backtotop:active { transform: none; }
}

@media print {
  .dlpc-backtotop { display: none !important; }
}