/* Shared form validation toasts + field invalid state.
   Not TP UI — keep Topic Path / problem.css quiet-toast separate. */

.am-form-toasts,
.am-auth-toasts {
  position: fixed;
  top: 25vh; /* ~1/4 page height from top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(504px, calc(100vw - 24px)); /* 420px + 20% */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.am-form-toast,
.am-auth-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 14px 17px 19px; /* ~20% larger than 14/12/16 */
  border-radius: var(--am-radius-md, 14px);
  border: 1px solid color-mix(in srgb, var(--am-form-alert, var(--am-accent)) 28%, transparent);
  border-left: 5px solid var(--am-form-alert, var(--am-accent));
  background: var(--am-form-alert-soft, color-mix(in srgb, var(--am-soft-accent) 88%, #fff));
  color: var(--am-form-alert-deep, color-mix(in srgb, var(--am-accent) 78%, #1c2a32));
  box-shadow: 0 10px 34px rgba(28, 33, 40, 0.12);
  font: 500 1.125rem/1.45 var(--am-font-body); /* 0.9375rem + 20% */
  animation: am-form-toast-in 0.2s ease-out;
}

.am-form-toast.is-leaving,
.am-auth-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

@keyframes am-form-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.am-form-toast__msg,
.am-auth-toast__msg {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: inherit;
}

.am-form-toast__close,
.am-auth-toast__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  opacity: 0.72;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.am-form-toast__close:hover,
.am-auth-toast__close:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--am-form-alert, var(--am-accent)) 12%, transparent);
}

.am-form-toast--danger,
.am-form-toast--warning,
.am-auth-toast--danger,
.am-auth-toast--warning {
  --am-form-alert: var(--door-warn, var(--am-accent));
  --am-form-alert-deep: var(--door-warn-deep, color-mix(in srgb, var(--am-accent) 82%, #000));
  --am-form-alert-soft: var(--door-warn-soft, color-mix(in srgb, var(--am-soft-accent) 90%, #fff));
}

.am-form-toast--success,
.am-form-toast--info,
.am-auth-toast--success,
.am-auth-toast--info {
  --am-form-alert: #1f6f78;
  --am-form-alert-deep: #145059;
  --am-form-alert-soft: color-mix(in srgb, #1f6f78 12%, white);
}

.am-login__input.is-invalid,
.am-login__pw.is-invalid .am-login__input {
  border-color: var(--door-warn, var(--am-accent));
  background: var(--door-warn-soft, color-mix(in srgb, var(--am-soft-accent) 70%, #fff));
}

.am-login__input.is-invalid:focus,
.am-login__pw.is-invalid .am-login__input:focus {
  border-color: var(--door-warn, var(--am-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--door-warn, var(--am-accent)) 18%, transparent);
}

/* Beat ui-v1 :focus so required/error highlight stays visible. */
body.am-ui-v1 .am-login__input.is-invalid,
body.am-ui-v1 .am-login__pw.is-invalid .am-login__input {
  border-color: var(--door-warn, var(--am-accent));
  background: var(--door-warn-soft, color-mix(in srgb, var(--am-soft-accent) 70%, #fff));
}

body.am-ui-v1 .am-login__input.is-invalid:focus,
body.am-ui-v1 .am-login__pw.is-invalid .am-login__input:focus {
  border-color: var(--door-warn, var(--am-accent));
  background: var(--door-warn-soft, color-mix(in srgb, var(--am-soft-accent) 70%, #fff));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--door-warn, var(--am-accent)) 18%, transparent);
}

/* MC answer forms — soft ring on the option list when nothing selected. */
.am-prob__options.is-invalid {
  border-radius: var(--am-radius-md, 12px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--door-warn, var(--am-accent)) 42%, transparent);
}