/* 0.9.74.1 (hotfix): the 6-digit code field of "Check your email" (/auth/email-code.js), on /signup and in the terminal's sign-up
   dialog. Theme tokens only (web/brand/theme.css + atlas-tokens.css), light and dark; logical properties for right-to-left; the
   digits themselves always run left to right (dir="ltr" on the field). The field's rules are `.cd-ec input.cd-ec-input`: auth.css
   styles input[type="text"] (0,1,1) and must not win. */
.cd-ec { display: grid; gap: var(--a-sp-4); margin: var(--a-sp-6) 0; text-align: center; justify-items: center; }
.cd-ec[hidden] { display: none; }
.cd-ec-or { width: 100%; display: flex; align-items: center; gap: var(--a-sp-5); margin: 0 0 var(--a-sp-2); color: var(--a-fg-3);
  font: var(--a-fw-medium) var(--a-fs-sm)/1 var(--a-sans); }
.cd-ec-or::before, .cd-ec-or::after { content: ''; flex: 1; height: 1px; background: var(--a-line-2); }
.cd-ec-label { font: var(--a-fw-semibold) var(--a-fs-md)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-1); }
.cd-ec input.cd-ec-input { box-sizing: border-box; width: 100%; max-width: 264px; height: 58px; margin: 0; padding: 0 var(--a-sp-4) 0 calc(var(--a-sp-4) + 0.34em);
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg); background: var(--a-sunken); color: var(--a-fg-1);
  font: 700 30px/1 var(--a-mono); letter-spacing: 0.34em; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--a-accent); }
.cd-ec input.cd-ec-input::placeholder { color: var(--a-fg-3); letter-spacing: 0.2em; }
.cd-ec input.cd-ec-input:hover { border-color: var(--a-fg-3); }
.cd-ec input.cd-ec-input:focus { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: -1px; border-color: var(--a-accent-t4); }
.cd-ec input.cd-ec-input[aria-invalid="true"] { border-color: var(--a-down); }
.cd-ec input.cd-ec-input[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.cd-ec[data-state="done"] input.cd-ec-input { border-color: var(--a-up); }
.cd-ec-msg { margin: 0; max-width: 340px; font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-2); }
.cd-ec-msg[hidden] { display: none; }
.cd-ec-msg.is-err { color: var(--a-down-soft); }
.cd-ec-msg.is-ok { color: var(--a-up-soft); }
.cd-ec-new { height: 38px; padding: 0 var(--a-sp-6); border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); background: transparent; color: var(--a-fg-1);
  font: var(--a-fw-semibold) var(--a-fs-sm)/1 var(--a-sans); cursor: pointer; }
.cd-ec-new:hover { background: var(--a-hover); }
.cd-ec-new[hidden] { display: none; }
.cd-ec-foot { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--a-sp-2);
  font: var(--a-fw-medium) var(--a-fs-sm)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-3); }
.cd-ec-resend { border: 0; padding: 0; background: none; color: var(--a-accent); font: inherit; font-weight: var(--a-fw-semibold); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.cd-ec-resend:disabled { color: var(--a-fg-3); text-decoration: none; cursor: default; }
.cd-ec-new:focus-visible, .cd-ec-resend:focus-visible { outline: var(--a-ring-w) solid var(--a-focus); outline-offset: var(--a-ring-off); }
.cd-ec-new:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 480px) {
  .cd-ec input.cd-ec-input { max-width: none; height: 56px; font-size: 28px; }
}