/* URL.ASIA account fields — depth-1
 * A quiet inset surface, with stable geometry across interaction states.
 * Scoped to account forms; creation and dashboard fields are unaffected.
 */
html :is(.auth-modal-dialog, .auth-card-inner) {
  --field-fill-top: #f0f4f6;
  --field-fill-bottom: #f8fafb;
  --field-border: #cbd6dc;
  --field-border-hover: #b3c3ca;
  --field-text: #1e303a;
  --field-placeholder: #72818c;
  --field-inset: rgba(24, 48, 65, .065);
  --field-edge: rgba(255, 255, 255, .9);
  --field-accent: #16876c;
  --field-ring: rgba(22, 135, 108, .12);
  --field-focus-fill: #ffffff;
  --field-invalid: #b7474e;
}

html.theme-dark :is(.auth-modal-dialog, .auth-card-inner) {
  --field-fill-top: #101820;
  --field-fill-bottom: #18232d;
  --field-border: #354653;
  --field-border-hover: #4a6272;
  --field-text: #edf3f6;
  --field-placeholder: #a4b2be;
  --field-inset: rgba(0, 0, 0, .2);
  --field-edge: rgba(255, 255, 255, .035);
  --field-accent: #6bd7b4;
  --field-ring: rgba(107, 215, 180, .13);
  --field-focus-fill: #172630;
  --field-invalid: #f09b9f;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--field-border);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--field-fill-top), var(--field-fill-bottom));
  color: var(--field-text);
  box-shadow:
    inset 0 2px 4px var(--field-inset),
    0 1px 0 var(--field-edge);
  caret-color: var(--field-accent);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:hover {
  border-color: var(--field-border-hover);
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:focus {
  outline: none;
  border-color: var(--field-accent);
  background: var(--field-focus-fill);
  box-shadow:
    inset 0 1px 2px var(--field-inset),
    0 0 0 3px var(--field-ring),
    0 1px 0 var(--field-edge);
}

/* Keep space for the existing reveal control, in both writing directions. */
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .refined-password input {
  padding-inline-end: 48px;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal {
  inset-inline-end: 1px;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--field-placeholder);
  opacity: 1;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--field-border);
  opacity: .7;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal:hover,
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal[aria-pressed="true"] {
  color: var(--field-accent);
  background: transparent;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .password-reveal:focus-visible {
  outline: 2px solid var(--field-accent);
  outline-offset: -5px;
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input[aria-invalid="true"] {
  border-color: var(--field-invalid);
}

/* Autofill remains legible without inheriting the browser's default yellow. */
html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text);
  caret-color: var(--field-accent);
  -webkit-box-shadow: inset 0 0 0 1000px var(--field-fill-bottom);
  border-color: var(--field-border);
}

html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:-webkit-autofill:focus {
  border-color: var(--field-accent);
  -webkit-box-shadow: inset 0 0 0 1000px var(--field-focus-fill), 0 0 0 3px var(--field-ring);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) :is(.auth-modal-dialog, .auth-card-inner) {
    --field-fill-top: #101820;
    --field-fill-bottom: #18232d;
    --field-border: #354653;
    --field-border-hover: #4a6272;
    --field-text: #edf3f6;
    --field-placeholder: #a4b2be;
    --field-inset: rgba(0, 0, 0, .2);
    --field-edge: rgba(255, 255, 255, .035);
    --field-accent: #6bd7b4;
    --field-ring: rgba(107, 215, 180, .13);
    --field-focus-fill: #172630;
    --field-invalid: #f09b9f;
  }
}

@media (max-width: 600px) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    transition: none;
  }
}

@media (forced-colors: active) {
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  html :is(.auth-modal-dialog, .auth-card-inner) .auth-form .auth-field input:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}