/* Shared form controls. Fields use a neutral edge until hovered; choice wrappers are borderless.
   The layer also beats legacy page-specific !important field and choice styles.
   Switches, tabs, document canvases and print keep their existing behavior. */
@layer product-selection {
  @media screen {
    /* Use a neutral resting edge and the brand edge on hover, including legacy forms.
       Composite money/search controls retain their existing border geometry. */
    :is(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="button"],[type="submit"],[type="reset"],[type="image"],[type="range"],[type="color"]),textarea,select,.slus__trigger,.ow-money:has(input),.ow-fsearch:has(input),.ow-fchip:has(input,select)):not([hidden],.hidden,.sr-only,.slus__native,.rentari-address-native-hidden):not(:where(.flatpickr-calendar *)) {
      outline: none !important;
      box-shadow: none !important;
    }
    :is(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="button"],[type="submit"],[type="reset"],[type="image"],[type="range"],[type="color"]),textarea,select,.slus__trigger,.ow-money:has(input),.ow-fsearch:has(input),.ow-fchip:has(input,select)):not([hidden],.hidden,.sr-only,.slus__native,.rentari-address-native-hidden,[aria-invalid="true"],.is-invalid,.invalid,.error,.sl-input-error,[class*="border-red"],[class*="border-rose"],:user-invalid):not(:where(.flatpickr-calendar *,.field-error *,.has-error *)):not(:has([aria-invalid="true"],.is-invalid,.invalid,.sl-input-error,:user-invalid)) {
      border-color: var(--border, #cbd5e1) !important;
    }
    :is(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="button"],[type="submit"],[type="reset"],[type="image"],[type="range"],[type="color"]),textarea,select,.slus__trigger,.ow-money:has(input),.ow-fsearch:has(input),.ow-fchip:has(input,select)):not([hidden],.hidden,.sr-only,.slus__native,.rentari-address-native-hidden,[aria-invalid="true"],.is-invalid,.invalid,.error,.sl-input-error,[class*="border-red"],[class*="border-rose"],:user-invalid):not(:where(.flatpickr-calendar *,.field-error *,.has-error *)):not(:has([aria-invalid="true"],.is-invalid,.invalid,.sl-input-error,:user-invalid)):hover:not(:disabled) {
      border-color: var(--brand-purple, #8c6cff) !important;
    }
    :is(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="button"],[type="submit"],[type="reset"],[type="image"],[type="range"],[type="color"]),textarea,select,.slus__trigger):focus-visible:not([hidden],.hidden,.sr-only,.slus__native,.rentari-address-native-hidden):not(:where(.flatpickr-calendar *)) {
      background-color: var(--surface-canvas, #f8fafc) !important;
    }
    /* Address autocomplete exposes its field through a host and CSS parts. */
    gmp-place-autocomplete {
      --gmp-mat-color-outline: var(--border, #cbd5e1) !important;
      --gmp-mat-color-primary: var(--brand-purple, #8c6cff) !important;
      outline: none !important;
      box-shadow: none !important;
    }
    gmp-place-autocomplete:not([aria-invalid="true"]),
    gmp-place-autocomplete:not([aria-invalid="true"])::part(input) {
      border-color: var(--border, #cbd5e1) !important;
    }
    gmp-place-autocomplete:hover:not([aria-invalid="true"]),
    gmp-place-autocomplete:hover:not([aria-invalid="true"])::part(input) {
      --gmp-mat-color-outline: var(--brand-purple, #8c6cff) !important;
      border-color: var(--brand-purple, #8c6cff) !important;
    }
    gmp-place-autocomplete::part(input) {
      outline: none !important;
      box-shadow: none !important;
    }
    gmp-place-autocomplete::part(focus-ring) { display: none !important; }
    gmp-place-autocomplete[aria-invalid="true"],
    .application-address-field:has(.field-error) gmp-place-autocomplete,
    .application-address-field:has(.field-error) gmp-place-autocomplete::part(input) {
      --gmp-mat-color-outline: var(--danger, #d8293e) !important;
      border-color: var(--danger, #d8293e) !important;
    }
    label:has(input:is([type="checkbox"],[type="radio"])):not(.switch,.toggle,.cookie-toggle-row):not(:has(input[role="switch"], .switch-track, .toggle-track, .cookie-switch)) {
      background: var(--selection-option-background, transparent) !important;
      border: 0 !important;
      box-shadow: none !important;
      color: var(--text, #172033) !important;
    }
    /* Hidden native inputs formerly relied on the card fill as their only
       visible signal. Give those choices the same native mark as plain rows. */
    label:not(.switch,.toggle,.cookie-toggle-row):not(:has(.switch-track, .toggle-track, .cookie-switch, .check-box)):not(:where(.ow-property-type-page .type-page .ow-type-card, .ow-property-type-page .type-page .ow-radio, .profile-color-option)) input:is([type="checkbox"],[type="radio"]):not([role="switch"],[hidden]) {
      position: static !important;
      display: inline-block !important;
      appearance: auto !important;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
      flex: 0 0 18px !important;
      inset: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      overflow: visible !important;
      clip: auto !important;
      clip-path: none !important;
      transform: none !important;
      accent-color: var(--action-ink, #277800);
      vertical-align: middle;
    }
    /* App screens mark radios and checkboxes with the primary button green;
       white-label shells follow their own primary color. Signing documents
       keep their own controls. */
    body[data-product-type]:not(.ow-lease-esign, .ow-esign-fill) input:is([type="checkbox"], [type="radio"]):not([role="switch"]) {
      accent-color: var(--btn-primary-bg, #00C434) !important;
    }
    /* Legacy cards paint their inner wrapper instead of the label. */
    :is(.ow-add-type,.ow-cat-chips .ow-check-chip,.pt-type,.ow-cr-pill) > input + span,
    .ow-typetile > input + .ow-typetile-in,
    input.peer + .role-pill,
    .mu-pkg > input + .pbox {
      background: var(--selection-option-background, transparent) !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    /* Pressed buttons and ARIA choices select a value instead of acting as
       outlined secondary actions. Their existing state and focus cues remain. */
    button[aria-pressed],
    .ow-seg:has(> button[aria-pressed]),
    :is([role="radio"],[role="checkbox"]):not(input) {
      border: 0 !important;
      box-shadow: none !important;
    }
    .mu-pkg.is-picked .pbox::before { display: none !important; }
    :is(.utility-option > .utility-icon,.launch-method > .launch-method-icon,.ow-type-card > .ow-type-art) {
      background: var(--surface-alt, #f8fafc) !important;
      color: var(--text, #172033) !important;
    }
    label:has(input:is([type="checkbox"],[type="radio"]):focus-visible):not(.switch,.toggle,.cookie-toggle-row),
    button[aria-pressed]:focus-visible,
    :is([role="radio"],[role="checkbox"]):not(input):focus-visible {
      outline: 2px solid var(--btn-action-ring, #277800) !important;
      outline-offset: 3px !important;
    }
    /* Amenity and utility lists are rows, with no surrounding option border. */
    :is(.amenities-grid,.amenities-radio-row,.ow-toggle-list,.rp-options) {
      --selection-option-border: transparent;
    }
    /* These three cards have owner-requested colors in both states. */
    .recommendation-mode[data-pastel-card] { --selection-option-background: var(--pastel-card-image), var(--pastel-card-base, var(--surface, #fff)); }
  }
}

/* Shared radio density: compact mouse rows, roomy touch targets. */
@layer product-selection {
  @media screen {
    :root { --radio-option-min-height:44px; }
    :is(label:has(input[type="radio"]),[role="radio"]:not(input)) {
      min-height:var(--radio-option-min-height) !important;
      height:auto !important;
      margin-block:0 !important;
      padding-block:2px !important;
      box-sizing:border-box !important;
    }
    :is([role="radiogroup"],*:has(> label input[type="radio"]),*:has(> [role="radio"]:not(input))) {
      row-gap:4px !important;
      column-gap:12px !important;
    }
    fieldset:has(input[type="radio"]) > legend { margin-bottom:12px !important; }
  }
  @media screen and (hover:hover) and (pointer:fine) {
    :root { --radio-option-min-height:28px; }
  }
}