/* Sign-in screens. Phone: the SignIn, SignIn-Expired and SignIn-Ended boards, full screen.
   Computer: a split page, the cobalt brand side with the line on the left and the door on the right. */
.sign { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sign-line { display: block; flex: none; }
.sign-art { width: 100%; max-width: 342px; }
.sign-art .sign-line { width: 100%; height: auto; }
.sign-name { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.05; text-wrap: balance; margin: 0; }
.sign-h1 { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.05; text-wrap: balance; }
.sign-h2 { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.05; }
.sign-text { font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 40ch; }
.sign-foot { display: flex; flex-direction: column; gap: 14px; }
.sign-or { font-size: 15px; line-height: 1.5; text-align: center; }
.sign .btn { min-height: 52px; font-weight: 500; width: 100%; }

/* the email code */
.sign-form { display: flex; flex-direction: column; gap: 14px; }
.sign-form .input { color: var(--ink); }
.sign-code { font-size: 22px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.sign-err { margin: 0; font-size: 14px; line-height: 1.45; color: var(--danger); }
.sign-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sign-links .link { font-size: 14px; }

/* the line draws itself once */
.sign-draw path { stroke-dasharray: var(--len, 0); animation: sign-draw 2.6s var(--ease) both; }
@keyframes sign-draw { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } }

/* ---- phone ---- */
@media (max-width: 899px) {
  .sign-blue { background: var(--cobalt); color: var(--white); }
  .sign-blue .sign-brand { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 32px; }
  .sign-blue .sign-main { margin-top: auto; padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); }
  .sign-blue .btn.sign-cta { background: var(--shell); border-color: var(--shell); color: var(--ink); }
  .sign-blue .btn.sign-cta:hover { background: #FFC3AA; border-color: #FFC3AA; }
  .sign-blue :focus-visible { outline-color: var(--white); }
  .sign-blue .sign-box { display: flex; flex-direction: column; gap: 20px; }
  .sign-blue .sign-text { color: rgba(255, 255, 255, .88); }
  .sign-blue .field label { color: var(--white); }
  .sign-blue .input { border-color: var(--white); }
  .sign-blue .sign-err { color: var(--shell); }
  .sign-blue .link { color: var(--white); }
  .sign-blue .sign-or { color: rgba(255, 255, 255, .88); text-align: left; font-size: 14px; }

  .sign-plain { background: var(--porcelain); }
  .sign-plain .sign-brand { display: none; }
  .sign-plain .sign-main, .sign-plain .sign-box { flex: 1; display: flex; flex-direction: column; }
  .sign-plain .sign-main { padding: 48px 24px calc(32px + env(safe-area-inset-bottom)); }
  .sign-plain .sign-h1 { margin-top: 40px; }
  .sign-plain .sign-text { margin-top: 14px; }
  .sign-plain .sign-foot { margin-top: auto; padding-top: 32px; }
}

/* ---- computer ---- */
@media (min-width: 900px) {
  .sign { flex-direction: row; background: var(--porcelain); }
  .sign-brand { flex: 0 0 52%; background: var(--cobalt); color: var(--white); position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; padding: 56px; min-height: 100vh; }
  .sign-art { max-width: min(520px, 38vw); margin: auto 0; }
  .sign-name { font-size: clamp(44px, 4.2vw, 60px); max-width: 16ch; }
  .sign-h1, .sign-h2 { font-size: 48px; }
  .sign-text { font-size: 16px; }
  .sign-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 48px; }
  .sign-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
  .sign-mark { display: none; }
  .sign-foot { margin-top: 16px; }
  .sign-or { text-align: left; color: var(--soft); font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) { .sign-draw path { animation: none; stroke-dasharray: none; } }