/* Uiverse "Input" (outlined floating label)
   Source:  https://uiverse.io/Maximinodotpy/thin-sheep-13
   Author:  Maximinodotpy
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: thin-sheep-13.orig.css
   Chosen instead of the requested bitter-bulldog-63 (PriyanshuGupta28): that one has a global `label` selector, a label that never floats
   inside the field, for="name" with no matching id and gradient-clipped label text; it fails readable-label + AA.
   Adapted for the contractor app:
   - Segoe UI -> --font-sans; font-size >= 16px (--fs-base, stops iOS zoom); radius 20px -> --radius-sm (inputs are 8px); min-height --tap;
   - 2px border rgb(200,200,200) -> --border-strong (>= 3:1 boundary); text --text; label --text-3 (floated: --text-2; focus: --accent);
   - floated-label chip colour #e8e8e8 -> var(--uv-ground, var(--surface)) so the notch always matches the surface the field sits on;
   - float trigger :valid -> :not(:placeholder-shown) (+ :focus) so OPTIONAL fields work too (needs placeholder=" ");
   - label association fixed in the HTML (id/for); max-width 190px -> var(--uv-input-w, 100%);
   - focus: border = --accent plus the 2px --focus ring (base.css radius reset on :focus-visible is overridden);
   - [aria-invalid="true"] -> --danger border/label; [disabled] state; --dur-base/--ease-out timing;
   - prefers-reduced-motion: label jumps instead of travelling. */

.inputGroup {
  font-family: var(--font-sans);
  margin: 1em 0 1em 0;
  max-width: var(--uv-input-w, 100%);
  position: relative;
}

.inputGroup input {
  font-size: var(--fs-base);
  padding: 0.8em;
  min-height: var(--tap);
  outline: none;
  border: 2px solid var(--border-strong);
  background-color: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.inputGroup label {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  position: absolute;
  left: 0;
  max-width: calc(100% - 1.5em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), color var(--dur-fast);
  color: var(--text-3);
}

.inputGroup :is(input:focus, input:not(:placeholder-shown))~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: var(--uv-ground, var(--surface));
  color: var(--text-2);
  max-width: none;
}

.inputGroup :is(input:focus, input:not(:placeholder-shown)) {
  border-color: var(--text-2);
}

.inputGroup input:focus ~ label { color: var(--accent); }
.inputGroup input:focus { border-color: var(--accent); }

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

.inputGroup input[aria-invalid="true"] { border-color: var(--danger); }
.inputGroup input[aria-invalid="true"] ~ label { color: var(--danger); }

.inputGroup input:disabled {
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .inputGroup input,
  .inputGroup label { transition: none; }
}