/* Text-entry focus system ---------------------------------------------------
   Typing should never resize a field or stack an outline, border change, and
   halo. Keep the resting border stable and use a quiet surface, caret, label,
   or prefix change as the keyboard-visible focus cue. Non-text controls keep
   their component-specific focus rings. */
:root {
  --text-entry-border: #d9d5df;
  --text-entry-focus-surface: #f7f5f9;
  --text-entry-focus-accent: #6750b8;
  --text-entry-error-border: #b4475a;
  --text-entry-error-surface: #fff6f7;
}

body.pro-mode {
  --text-entry-border: var(--ops-line-strong, #dcd7e1);
  --text-entry-focus-surface: var(--ops-surface-active, #f1eef9);
  --text-entry-focus-accent: var(--ops-violet, #6750b8);
  --text-entry-error-border: var(--ops-danger, #a13f51);
  --text-entry-error-surface: var(--ops-danger-soft, #fbf0f2);
}

.auth-screen,
.pro-auth-screen {
  --text-entry-border: var(--auth-line, #ddd8e2);
  --text-entry-focus-surface: color-mix(
    in srgb,
    var(--auth-accent-soft, #f3e8ff) 46%,
    #fff
  );
  --text-entry-focus-accent: var(--auth-accent-dark, #51416f);
}

/* `:is()` adopts the most specific branch, so this final-loaded rule also
   supersedes older surface selectors without relying on route-specific hacks. */
html
  body
  :is(
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ),
    textarea,
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ):not([data-control="signup-phone-code"]):not(
    [data-control="booking-phone-verification-token"]
  ):not(:disabled):not([aria-invalid="true"]):not(:user-invalid) {
  border-color: var(--text-entry-border) !important;
  caret-color: var(--text-entry-focus-accent);
}

html
  body
  :is(
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ),
    textarea,
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ):not([data-control="signup-phone-code"]):not(
    [data-control="booking-phone-verification-token"]
  ):not(:disabled):not([aria-invalid="true"]):not(:user-invalid):is(
    :focus,
    :focus-visible
  ) {
  border-color: var(--text-entry-border) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background-color: var(--text-entry-focus-surface) !important;
  box-shadow: none !important;
  caret-color: var(--text-entry-focus-accent) !important;
}

/* Search, price, and unit-prefix controls paint focus once on their shared
   shell. Their inner input stays transparent, so no second rectangle appears. */
html
  body
  :is(
    .search-field,
    .business-team-service-money,
    .business-service-money-field,
    .business-service-inline-money,
    .business-import-input-prefix,
    .business-import-input-suffix
  ):has(
    > input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ):not(:disabled):not([aria-invalid="true"]):not(:user-invalid)
  ) {
  border-color: var(--text-entry-border) !important;
}

html
  body
  :is(
    .search-field,
    .business-team-service-money,
    .business-service-money-field,
    .business-service-inline-money,
    .business-import-input-prefix,
    .business-import-input-suffix
  ):has(
    > input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ):not([aria-invalid="true"]):not(:user-invalid):is(
        :focus,
        :focus-visible
      )
  ) {
  border-color: var(--text-entry-border) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background-color: var(--text-entry-focus-surface) !important;
  box-shadow: none !important;
}

html
  body
  :is(
    .search-field,
    .business-team-service-money,
    .business-service-money-field,
    .business-service-inline-money,
    .business-import-input-prefix,
    .business-import-input-suffix
  )
  > input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
    [type="file"]
  ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
    [type="range"]
  ):not([type="reset"]):not([type="submit"]):not(
    [data-control="salon-query"]
  ):not([data-control="signup-phone-code"]):not(
    [data-control="booking-phone-verification-token"]
  ):not(:disabled):not([aria-invalid="true"]):not(:user-invalid):is(
    :focus,
    :focus-visible
  ) {
  background-color: transparent !important;
}

html
  body
  :is(
    .search-field,
    .business-team-service-money,
    .business-service-money-field,
    .business-service-inline-money,
    .business-import-input-prefix,
    .business-import-input-suffix
  ):has(
    > input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ):not([aria-invalid="true"]):not(:user-invalid):is(
        :focus,
        :focus-visible
      )
  )
  > :not(input) {
  color: var(--text-entry-focus-accent) !important;
}

/* Labels provide a second, non-geometric cue for standalone fields. */
html
  body
  label:has(
    :is(
      input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
          [type="file"]
        ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
          [type="range"]
        ):not([type="reset"]):not([type="submit"]):not(
          [data-control="salon-query"]
        ),
      textarea,
      [contenteditable="true"],
      [contenteditable="plaintext-only"]
    ):not([data-control="signup-phone-code"]):not(
      [data-control="booking-phone-verification-token"]
    ):not([aria-invalid="true"]):not(:user-invalid):is(
      :focus,
      :focus-visible
    )
  )
  > :is(span, strong):first-child {
  color: var(--text-entry-focus-accent);
}

/* An import row previously added a third, large halo around the focused
   field. Keep its category rail and resting elevation unchanged while typing. */
html
  body
  .business-service-import-row:not(.is-invalid):has(
    :is(
      input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
          [type="file"]
        ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
          [type="range"]
        ):not([type="reset"]):not([type="submit"]):not(
          [data-control="salon-query"]
        ),
      textarea
    ):is(:focus, :focus-visible)
  ) {
  border-color: color-mix(
    in srgb,
    var(--category-color) 24%,
    #e4dfe7
  ) !important;
  box-shadow:
    0 1px 0 rgba(45, 36, 54, 0.03),
    0 8px 20px rgba(45, 36, 54, 0.045) !important;
}

/* Verification codes are a text field rendered as six visual cells. The
   active cell uses fill and text—never an extra ring—to expose input focus. */
.phone-code-input-shell:focus-within .phone-code-cell.active {
  border-color: #d5d0d8 !important;
  color: var(--auth-accent-dark, var(--text-entry-focus-accent)) !important;
  background: color-mix(
    in srgb,
    var(--auth-accent-soft, var(--text-entry-focus-surface)) 58%,
    #fff
  ) !important;
  box-shadow: none !important;
  transition:
    color 140ms ease,
    background-color 140ms ease !important;
}

.phone-code-input-shell > input:is(:focus, :focus-visible) {
  background: transparent !important;
  caret-color: transparent !important;
  transition: none !important;
}

/* Locked account fields keep their verified treatment. Focus is conveyed by
   the existing badge plus its accent-color change, not by repainting the box. */
.auth-locked-field:is(.is-verified, .is-selected)
  > input:is(:focus, :focus-visible),
.auth-phone-entry.is-verified > input:is(:focus, :focus-visible) {
  border-color: #d9d6dc !important;
  color: #77737a !important;
  background: #f4f3f5 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.auth-locked-field:is(.is-verified, .is-selected):has(
    > input:is(:focus, :focus-visible)
  )
  > span {
  color: var(--auth-accent-dark, var(--text-entry-focus-accent));
}

/* Error styling is intentionally last: validation remains stronger than the
   ordinary focus surface, including composite prefix fields and code cells. */
html
  body
  :is(
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ),
    textarea,
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ):not([data-control="signup-phone-code"]):not(
    [data-control="booking-phone-verification-token"]
  ):is([aria-invalid="true"], :user-invalid) {
  border-color: var(--text-entry-error-border) !important;
  background-color: var(--text-entry-error-surface) !important;
}

html
  body
  :is(
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
        [type="file"]
      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
        [type="range"]
      ):not([type="reset"]):not([type="submit"]):not(
        [data-control="salon-query"]
      ),
    textarea,
    [contenteditable="true"],
    [contenteditable="plaintext-only"]
  ):not([data-control="signup-phone-code"]):not(
    [data-control="booking-phone-verification-token"]
  ):is([aria-invalid="true"], :user-invalid):is(:focus, :focus-visible) {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  caret-color: var(--text-entry-error-border) !important;
}

html
  body
  :is(
    .search-field,
    .business-team-service-money,
    .business-service-money-field,
    .business-service-inline-money,
    .business-import-input-prefix,
    .business-import-input-suffix
  ):has(> input:is([aria-invalid="true"], :user-invalid)) {
  border-color: var(--text-entry-error-border) !important;
  background-color: var(--text-entry-error-surface) !important;
  box-shadow: none !important;
}

.phone-code-input-shell:has(> input[aria-invalid="true"]) .phone-code-cell,
.business-crm-import-review-field.is-attention :is(input, textarea) {
  border-color: var(--text-entry-error-border) !important;
  background-color: var(--text-entry-error-surface) !important;
}

.business-crm-import-review-field.is-attention
  :is(input, textarea):is(:focus, :focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
  caret-color: var(--text-entry-error-border) !important;
}

/* High-contrast modes suppress the quiet fill/color focus cue above. Restore
   an explicit system-color outline there without changing ordinary visuals. */
@media (forced-colors: active) {
  html
    body
    :is(
      input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
          [type="file"]
        ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
          [type="range"]
        ):not([type="reset"]):not([type="submit"]):not(
          [data-control="salon-query"]
        ),
      textarea,
      [contenteditable="true"],
      [contenteditable="plaintext-only"]
    ):not([data-control="signup-phone-code"]):not(
      [data-control="booking-phone-verification-token"]
    ):not(:disabled):is(:focus, :focus-visible) {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }

  .phone-code-input-shell:focus-within .phone-code-cell.active {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
}