/* Forms (it-340): Sign in's one field. A labelled input, the address suffix drawn after it, the refusal under it. */

.mkt-form {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-5);
}

.mkt-field {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-2);
}

.mkt-field__label {
  font-size: var(--mkt-size-md);
  font-weight: var(--mkt-weight-bold);
}

.mkt-field__control {
  display: flex;
  align-items: center;
  min-height: var(--mkt-control);
  padding: 0 var(--mkt-space-4);
  border-radius: var(--mkt-radius-lg);
  background: var(--mkt-chrome);
  box-shadow: inset 0 0 0 var(--mkt-line-strong) var(--mkt-tint-deep);
}

.mkt-field__control:focus-within {
  box-shadow: inset 0 0 0 var(--mkt-line-bold) var(--mkt-purple);
}

.mkt-field__control--invalid,
.mkt-field__control--invalid:focus-within {
  box-shadow: inset 0 0 0 var(--mkt-line-bold) var(--mkt-red);
}

.mkt-field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--mkt-space-3-5) 0;
  border: 0;
  background: transparent;
  font-size: var(--mkt-size-body-lg);
  outline: none;
}

/* The field's control shows its focus (.mkt-field__control:focus-within); the input inside draws none of its own. */
.mkt-field__input:focus-visible {
  outline: none;
}

/* A field the browser filled (a saved or suggested password, an address): the browser paints the input its own blue — a
 * square box inside the rounded control. The whole control takes the site's tint instead; the input is painted over
 * to match (an inset shadow — the one paint the browser's autofill colour doesn't override), its text in the site's ink.
 * Each selector on its own rule: a browser that doesn't know one of them drops only that rule. */
.mkt-field__control:has(.mkt-field__input:autofill) {
  background: var(--mkt-tint-strong);
}

.mkt-field__control:has(.mkt-field__input:-webkit-autofill) {
  background: var(--mkt-tint-strong);
}

.mkt-field__input:autofill {
  box-shadow: inset 0 0 0 var(--mkt-autofill-cover) var(--mkt-tint-strong);
  -webkit-text-fill-color: var(--mkt-ink);
  caret-color: var(--mkt-ink);
}

.mkt-field__input:-webkit-autofill {
  box-shadow: inset 0 0 0 var(--mkt-autofill-cover) var(--mkt-tint-strong);
  -webkit-text-fill-color: var(--mkt-ink);
  caret-color: var(--mkt-ink);
}

.mkt-field__suffix {
  flex: none;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--mkt-size-body-lg);
  color: var(--mkt-muted);
}

.mkt-field__hint {
  font-size: var(--mkt-size-xs);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-muted);
}

.mkt-field__error {
  font-size: var(--mkt-size-xs);
  line-height: var(--mkt-leading-body);
  font-weight: var(--mkt-weight-semibold);
  color: var(--mkt-red);
}

.mkt-form .mkt-btn {
  align-self: flex-start;
}

/* The page Sign in sits on: one card, centered. */
.mkt-signin {
  display: flex;
  justify-content: center;
  padding: var(--mkt-page-y) var(--mkt-gutter);
  background: var(--mkt-tint);
  min-height: var(--mkt-page-min);
}

.mkt-signin .mkt-card {
  width: 100%;
  max-width: var(--mkt-measure-md);
  padding: var(--mkt-pad-card);
}

.mkt-signin .mkt-h2 {
  margin-bottom: var(--mkt-space-3);
}

.mkt-signin .mkt-body {
  margin-bottom: var(--mkt-space-7);
}

/* Register (it-370): a wider card, two fields to a row, the live workspace answer, the fine print, the honeypot. */
.mkt-signin--wide .mkt-card {
  max-width: var(--mkt-measure-lg);
}

.mkt-signin .mkt-eyebrow {
  margin-bottom: var(--mkt-space-3);
}

.mkt-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-5);
}

.mkt-form__row .mkt-field {
  flex: 1 1 var(--mkt-basis-xs);
}

.mkt-field__status {
  min-height: var(--mkt-space-5);
  font-size: var(--mkt-size-xs);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-muted);
}

.mkt-field__status:empty {
  display: none;
}

.mkt-field__status--ok {
  color: var(--mkt-green);
  font-weight: var(--mkt-weight-semibold);
}

.mkt-field__status--bad {
  color: var(--mkt-red);
  font-weight: var(--mkt-weight-semibold);
}

.mkt-form__error {
  padding: var(--mkt-space-3) var(--mkt-space-4);
  border-radius: var(--mkt-radius-md);
  background: var(--mkt-tint);
  font-size: var(--mkt-size-sm);
  line-height: var(--mkt-leading-body);
  font-weight: var(--mkt-weight-semibold);
  color: var(--mkt-red);
}

.mkt-card > .mkt-form__error,
.mkt-card > .mkt-form__note {
  margin-bottom: var(--mkt-space-5);
}

.mkt-form__note {
  padding: var(--mkt-space-3) var(--mkt-space-4);
  border-radius: var(--mkt-radius-md);
  background: var(--mkt-amber-bg);
  font-size: var(--mkt-size-sm);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-amber);
}

.mkt-form__fine {
  font-size: var(--mkt-size-xs);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-muted);
}

/* The honeypot: in the form for a bot, out of the page for a person (no display:none — some bots skip those). */
.mkt-hp {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The card step's hosted form: the frame fills the card's width and grows to what the form asks (its script). */
.mkt-register-frame {
  margin-top: var(--mkt-space-2);
}

.mkt-register-frame__iframe {
  display: block;
  width: 100%;
  min-height: var(--mkt-frame-min);
  border: 0;
  border-radius: var(--mkt-radius-lg);
  background: var(--mkt-chrome);
}

.mkt-register-frame .mkt-form__note {
  margin-top: var(--mkt-space-4);
}