/*
 * The server-rendered sign-in pages (templates/veer/) on top of the React pages' stylesheet (ds.css, public.css,
 * public-auth.css): only what differs because the controls are WTForms fields instead of React components.
 */

/* the submit button is <input type="submit">: no platform look (iOS Safari), centred label like .dv-btn */
.dv-root input.dv-btn {
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
  text-align: center;
}

.dv-root input.dv-btn:disabled {
  cursor: default;
}

/* a submitted form waits for the server */
.dv-root .auth-form[aria-busy="true"] input.dv-btn {
  cursor: progress;
  opacity: 0.7;
}

/* consent text and links wrap on the narrowest phones */
.dv-root .dv-check > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* the note above the form and the resend countdown */
.dv-root .auth-form > .dv-note {
  margin: 0;
}

.dv-root .auth-success-visual > .dv-note,
.dv-root .auth-card-content > .dv-note {
  margin: 0;
}

.dv-root [hidden] {
  display: none !important;
}

/* production Viewer icons (templates/veer/_icons.html): before a field in the muted colour, ink while it is focused */
.dv-root .veer-prod-icon {
  display: block;
  flex: none;
}

.dv-root .dv-field:focus-within > .veer-prod-icon {
  color: var(--dv-t1);
  transition: color var(--dv-fast);
}

.dv-root .auth-reveal[aria-pressed="true"] {
  color: var(--dv-t1);
}

/* long headings wrap into balanced lines */
.dv-root .auth-card h1 {
  text-wrap: balance;
}

@media (min-width: 761px) {
  .dv-root .auth-page-layout {
    grid-template-columns: minmax(0, 460px);
  }
}