/* Uiverse "Button" (flat outline, fill sweeps in on hover) - secondary button
   Source:  https://uiverse.io/yaasiinaxmed/serious-stingray-77
   Author:  yaasiinaxmed
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: serious-stingray-77.orig.css
   Adapted for the contractor app:
   - original styled bare `button`/`button::before`; scoped to .uv-outline (the only class added) with the --color token kept;
   - --color #0077ff -> var(--text) (neutral, 17:1; primary stays the tenant accent); hover text white -> var(--bg);
   - fixed 6em x 2.6em -> height --tap (44px), padding-inline, min-width 6em; margin 20px -> 0; font --fs-base (16px) semibold;
   - the fill circle was a fixed 150x200 ellipse that would not cover wider buttons; now a 250%-wide circle that scales from the bottom-right corner
     to the centre (same visual sweep, covers any width);
   - radius -> --radius-sm; border --border-w x2; timing -> --dur-base / --ease-out; :active press;
   - :focus-visible ring (--focus, offset) with an explicit radius (base.css resets it to --radius-xs); [disabled] state; fill only under (hover: hover) + :active so touch has no sticky fill;
   - prefers-reduced-motion: fill appears instantly, no travel. */

.uv-outline {
  --color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  display: inline-block;
  min-width: 6em;
  padding-inline: var(--space-5);
  height: var(--tap);
  line-height: calc(var(--tap) - 4px);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  font-size: var(--fs-base);
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: var(--radius-sm);
  position: relative;
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}

.uv-outline::before {
  position: absolute;
  content: "";
  background: var(--color);
  width: 250%;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
}

.uv-outline:before {
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.3s all var(--ease-out);
  transition-duration: var(--dur-base);
}

@media (hover: hover) {
  .uv-outline:hover { color: var(--bg); }
  .uv-outline:hover::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
}

.uv-outline:active { transform: scale(0.98); color: var(--bg); }
.uv-outline:active::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.uv-outline:focus-visible {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}

.uv-outline:disabled,
.uv-outline[aria-disabled="true"] {
  --color: var(--text-3);
  cursor: not-allowed;
  border-color: var(--border-strong);
  transform: none;
}
.uv-outline:disabled::before { display: none; }
.uv-outline:disabled:hover { color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .uv-outline,
  .uv-outline:before { transition: none; }
  .uv-outline:active { transform: none; }
}