/* The sign-in family, on top of studio.css's tokens: one centred card and the code entry, for the
   hosted studio and accounts.<domain> alike (docs/accounts.md «Sign-in screens»). Logical properties
   only, except where a thing is left to right by nature (a password, the code).

   The policy of its layout, pinned by e2e 13 and the scratch measuring walk:
   - the card stays where it is: it hangs from a fixed distance below the top, so a message or an
     opened help grows it downwards and nothing the person is looking at moves;
   - six 44 px boxes fit at 320: below 360 the card gives up its side margins and its border;
   - nothing is clipped; a short window scrolls. */

.auth-shell {
  box-sizing: border-box; min-height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding-block: clamp(20px, 9vh, 88px) 32px; padding-inline: 16px;
  background: var(--bg); color: var(--text);
}
body.accounts-body .auth-shell { min-height: 100dvh; }

.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; font-weight: 800; font-size: 1.0625rem; color: var(--text); }
.auth-brand .brand-mark { width: 36px; height: 36px; border-radius: 11px; box-shadow: var(--shadow); }

.auth-card {
  box-sizing: border-box; width: min(26.5rem, 100%); min-width: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 22px); box-shadow: var(--shadow);
  padding: 28px clamp(20px, 5vw, 32px) 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.auth-card.is-wide { width: min(35rem, 100%); }
.auth-head { display: flex; flex-direction: column; gap: 6px; }
.auth-card h1 { margin: 0; font-size: 1.5rem; line-height: 1.5; font-weight: 800; text-wrap: balance; }
.auth-head p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.8; text-wrap: pretty; }
.auth-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.auth-body > p { margin: 0; }

.auth-foot { display: flex; justify-content: center; }
.auth-lang { display: flex; align-items: center; gap: 2px; }

/* a phone: six 44 px boxes need the room */
@media (max-width: 399.98px) { .auth-shell { padding-inline: 12px; } }
/* below 360 they need all the width there is */
@media (max-width: 359.98px) {
  .auth-shell { padding-inline: 0; padding-block-start: 12px; gap: 12px; }
  .auth-card, .auth-card.is-wide { border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: 16px; }
}

/* ----- fields ----- */

.auth-field, .accounts-field, .auth-card .hosted-field { display: grid; gap: 6px; min-width: 0; }
.auth-label, .accounts-field label, .auth-card .hosted-label, .code-entry-label { font-weight: 700; font-size: 0.875rem; }
.auth-input, .auth-card .accounts-input, .auth-card .field {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 12px);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1rem;
}
.auth-input::selection, .auth-card .accounts-input::selection, .auth-card .field::selection { background: var(--accent-soft); color: var(--text); }
/* the Ink Ring: 2 px of the palette's deep ink, laid on the control's own border */
.auth-input:focus, .auth-card .accounts-input:focus, .auth-card .field:focus { outline: 2px solid var(--accent-strong); outline-offset: -1px; box-shadow: none; border-color: var(--accent-strong); }
.auth-input[aria-invalid="true"], .auth-card .accounts-input[aria-invalid="true"], .auth-card .field[aria-invalid="true"] { border-color: var(--danger); box-shadow: none; }
.auth-field-error { margin: 0; color: var(--danger); font-size: 0.875rem; line-height: 1.6; }
.auth-field-error:empty { display: none; }
.auth-input:-webkit-autofill, .auth-card .accounts-input:-webkit-autofill, .auth-card .field:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
}

/* a form's one message, the same in both apps: red for a refusal, ink for done; words, no icon */
.auth-card .accounts-message, .auth-card .hosted-message .callout { margin: 0; padding: 10px 14px; border: 0; border-radius: var(--radius-sm, 12px); font-size: 0.9375rem; line-height: 1.7; }
.auth-card .hosted-message .callout-warn { background: var(--danger-soft); color: var(--danger); }
.auth-card .hosted-message .callout-ok { background: var(--accent-soft); color: var(--accent-strong); }
.auth-card .hosted-message .callout .ic { display: none; }

/* a password shows and hides; it reads left to right, so the eye is at its end, the right */
.auth-password { position: relative; display: block; min-width: 0; }
.auth-password input { padding-right: 50px; }
.auth-eye {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  border-radius: 10px; color: var(--text-muted); cursor: pointer;
}
.auth-eye:hover { color: var(--text); }
.auth-eye:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.auth-eye .ic { width: 20px; height: 20px; }

/* ----- buttons and links ----- */

.auth-card .btn { border-radius: var(--radius-sm, 12px); }
.auth-card .btn-primary, .auth-card .btn-danger, .code-backup-submit { width: 100%; min-height: 48px; justify-content: center; font-weight: 700; font-size: 1rem; box-shadow: none; }
.auth-card .btn-primary:hover { box-shadow: none; }
.auth-card .accounts-actions, .auth-card .hosted-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.auth-card .accounts-actions .btn, .auth-card .hosted-actions .btn { justify-content: center; }
.auth-card .btn-quiet { min-height: 44px; justify-content: center; }
.auth-card .hosted-codes-box .hosted-actions { flex-direction: row; flex-wrap: wrap; }
.auth-card a.btn { text-decoration: none; }
.auth-card > .auth-body > a.btn, .auth-card > .auth-body > button.btn { justify-content: center; min-height: 44px; }
.auth-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: auth-spin 0.7s linear infinite; }
.btn[aria-busy="true"] .auth-spinner { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px;
  background: none; border: 0; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--accent-strong); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px;
}
.auth-link[hidden] { display: none; }
.auth-link:hover { text-decoration-color: currentColor; }
.auth-lang-choice { padding-inline: 12px; color: var(--text-muted); text-decoration: none; font-weight: 600; }
.auth-lang-choice:hover { color: var(--text); }
.auth-lang-choice[aria-current] { color: var(--text); font-weight: 800; cursor: default; }
.auth-link:focus-visible, .auth-card a:focus-visible, .auth-card summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; }

/* what to do without the phone, and such: folded, a quiet line */
.auth-help { font-size: 0.9375rem; }
.auth-help summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-muted); font-weight: 600; cursor: pointer; list-style: none; }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.12s ease; }
.auth-help summary:dir(rtl)::before { transform: rotate(45deg); }
.auth-help[open] summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.auth-help[open] summary:dir(rtl)::before { transform: rotate(-45deg) translate(1px, -1px); }
.auth-help ul { margin: 2px 0 8px; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.8; color: var(--text-muted); font-size: 0.875rem; }

/* ----- the code entry ----- */

.code-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.auth-body > .code-form + .auth-help { margin-block-start: -14px; }
/* no more can be sent from this page: the one way on is under the words */
.code-backup-swap:has(.code-entry[data-state="limited"], .code-entry[data-state="expired"]) > .auth-link { display: none; }
.auth-body:has(.code-entry[data-state="limited"], .code-entry[data-state="expired"]) > :not(.code-form) { display: none; }
.code-form[hidden], .code-backup[hidden], .code-backup-swap[hidden] { display: none; }
.code-backup-swap, .code-backup { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.code-backup > .auth-field + .code-entry-say { margin-block-start: 6px; }
.code-backup > .code-backup-submit { margin-block-end: 4px; }
.code-backup-swap > .auth-link, .code-backup > .auth-link { align-self: flex-start; }
.code-entry { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.code-entry-label.is-unseen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the six at 320 are exactly 44 px wide (288 less six 4 px gaps); each grows with the card to 56 */
.code-entry-group { position: relative; width: 100%; max-width: calc(6 * 56px + 4 * 8px + 16px); margin-inline: 0; touch-action: manipulation; }
.code-entry-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 0 repeat(3, minmax(0, 1fr)); column-gap: 4px; direction: ltr; }
.code-entry-box:nth-child(4) { grid-column: 5; }
@media (min-width: 400px) { .code-entry-boxes { column-gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)) 4px repeat(3, minmax(0, 1fr)); } }
.code-entry-box {
  box-sizing: border-box; display: grid; place-items: center; min-width: 0; height: 58px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 12px);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font); font-size: 1.625rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.15s ease;
  user-select: none;
}
.code-entry-box.is-filled { background: var(--surface); }
.code-entry-box.is-active { outline: 2px solid var(--accent-strong); outline-offset: -1px; border-color: var(--accent-strong); background: var(--surface); }

/* the one real input lies over the boxes: its text and caret are never seen. 16 px: no zoom on iOS */
.code-entry-input {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0;
  border: 0; outline: 0; background: transparent; box-shadow: none; appearance: none; -webkit-appearance: none;
  color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent;
  font-size: 16px; letter-spacing: 0; text-align: left; cursor: text; min-height: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.code-entry-input::selection { background: transparent; color: transparent; }
.code-entry-input:focus, .code-entry-input:focus-visible { outline: 0; box-shadow: none; }
/* a browser's autofill paints the field: that paint never arrives */
.code-entry-input:-webkit-autofill, .code-entry-input:-webkit-autofill:focus, .code-entry-input:autofill {
  -webkit-text-fill-color: transparent; caret-color: transparent;
  transition: background-color 0s 999999s, color 0s 999999s;
}

.code-entry[data-state="busy"] .code-entry-box { background: var(--surface-2); color: var(--text-muted); }
.code-entry[data-state="done"] .code-entry-box { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.code-entry[data-state="error"] .code-entry-box:not(.is-active) { border-color: var(--danger); }
.code-entry[data-state="retry"] .code-entry-error { color: var(--text); font-weight: 400; }
.code-entry[data-state="limited"] .code-entry-box, .code-entry[data-state="expired"] .code-entry-box { opacity: 0.5; }
.code-entry[data-state="limited"] .code-entry-input, .code-entry[data-state="expired"] .code-entry-input { cursor: not-allowed; }
.code-entry[data-state="busy"] .code-entry-input, .code-entry[data-state="done"] .code-entry-input { cursor: progress; }

@keyframes code-entry-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 88% { transform: translateX(2px); } }
.code-entry.is-shaking .code-entry-boxes { animation: code-entry-shake 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@media (prefers-reduced-motion: reduce) { .code-entry.is-shaking .code-entry-boxes { animation: none; } }
:root[data-motion="reduce"] .code-entry.is-shaking .code-entry-boxes { animation: none; }

/* its words have a place of their own, so that they come and go without moving anything */
.code-entry-say { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 1.75rem; }
.code-entry-status, .code-entry-error { margin: 0; font-size: 0.9375rem; line-height: 1.75; }
.code-entry-status { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.code-entry-status:empty, .code-entry-error:empty { display: none; }
.code-entry[data-state="done"] .code-entry-status { color: var(--accent-strong); font-weight: 600; }
.code-entry-status.is-working::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: auth-spin 0.7s linear infinite; }
.code-entry-error { color: var(--danger); font-weight: 600; }
.code-entry-retry { min-height: 48px; justify-content: center; }
.code-entry-retry[hidden] { display: none; }

/* ----- two-step set-up ----- */

.auth-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: auth-step; }
.auth-steps > li { counter-increment: auth-step; position: relative; display: flex; flex-direction: column; gap: 8px; padding-inline-start: 38px; min-width: 0; }
.auth-steps > li:lang(fa)::before { content: counter(auth-step, persian); }
.auth-steps > li::before { content: counter(auth-step); position: absolute; inset-inline-start: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: 0.875rem; }
.auth-steps > li > b { line-height: 26px; }
.auth-steps p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.8; }
.auth-qr { display: block; align-self: center; width: 188px; height: 188px; box-sizing: border-box; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm, 12px); }
.auth-secret { display: block; box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm, 12px); font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.04em; text-align: center; }

.auth-codes { box-sizing: border-box; width: 100%; list-style: none; counter-reset: auth-code; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; margin: 0; padding: 0; }
.auth-codes code { white-space: nowrap; }
.auth-codes li { counter-increment: auth-code; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm, 12px); background: var(--surface-2); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.875rem; min-width: 0; }
.auth-codes li::before { content: counter(auth-code); font-size: 0.75rem; color: var(--text-muted); min-width: 1.3em; font-family: var(--font); }
.auth-codes li:lang(fa)::before { content: counter(auth-code, persian); }