/* Sign-in page: the rehearsal app's calm white world, an intro on the left and
   a mint panel with the two-step email flow on the right. */
.login-page{min-height:100%;display:flex;flex-direction:column}
body.login-page .topbar{border-bottom-color:transparent}
.login{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px 72px;align-items:center;padding:24px max(24px,calc((100% - 1180px)/2)) 72px}

.login-intro h1{font-size:clamp(40px,5.2vw,66px);line-height:1.04;font-weight:450;letter-spacing:-.045em;max-width:620px}
.login-intro .lead{max-width:470px;text-wrap:pretty}
.login-hand{display:flex;align-items:flex-start;gap:6px;margin:30px 0 0;font-family:var(--hand);font-size:27px;line-height:1.1;color:var(--pen)}
.login-hand span{transform:rotate(-2deg);padding-top:4px}
.login-hand svg{width:96px;height:44px;margin-top:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Panel: radius 28 = 12 (inputs) + 16 of breathing room at the edges. */
.login-panel{position:relative;background:var(--mist);border-radius:28px;padding:32px;display:grid;gap:18px;box-shadow:0 1px 0 rgba(24,77,60,.04),0 24px 60px -28px rgba(18,51,35,.18)}
.login-notice{margin:0}
.login-step{display:grid;gap:22px}
.login-step[data-active="true"]{animation:step-in .32s cubic-bezier(.2,0,0,1) backwards}
@keyframes step-in{from{opacity:0;transform:translateY(8px);filter:blur(2px)}}

/* Providers */
.providers{display:grid;gap:10px}
.provider{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 20px;border-radius:14px;background:var(--white);color:var(--ink);font-size:15px;font-weight:550;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(18,51,35,.05);transition:box-shadow .18s,transform .16s cubic-bezier(.2,0,0,1)}
.provider:hover{box-shadow:0 0 0 1px var(--mint-mid),0 6px 18px -8px rgba(18,51,35,.22)}
.provider:active{transform:scale(.98)}
.provider-logo{width:24px;height:24px;flex:none}
.provider[aria-busy="true"]{pointer-events:none;opacity:.7}

.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.divider:before,.divider:after{content:'';flex:1;height:1px;background:var(--line)}

/* Fields */
.email-form,#codeForm{display:grid;gap:10px}
.text-input{width:100%;min-height:54px;border:0;border-radius:14px;padding:14px 16px;background:var(--white);font-size:16px;line-height:1.4;box-shadow:0 0 0 1px var(--line);transition:box-shadow .18s;caret-color:var(--pen)}
.text-input::placeholder{color:#94a69c}
.text-input:hover{box-shadow:0 0 0 1px var(--mint-mid)}
.text-input:focus{outline:0;box-shadow:0 0 0 2px var(--pen)}
.text-input[aria-invalid="true"]{box-shadow:0 0 0 2px #c0533f}
.field-error{margin:0;font-size:13px;line-height:1.5;color:var(--err-ink)}

.login-submit{margin-top:8px;width:100%;position:relative;transition:background .18s,transform .16s cubic-bezier(.2,0,0,1),opacity .18s}
.login-submit:hover:not(:disabled){transform:none}
.login-submit:active:not(:disabled){transform:scale(.96)}
.login-submit .button-icon{transition:transform .18s cubic-bezier(.2,0,0,1)}
.login-submit:hover:not(:disabled) .button-icon{transform:translateX(3px)}
.spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
.login-submit[aria-busy="true"]{pointer-events:none}
.login-submit[aria-busy="true"] .spinner{display:block}
.login-submit[aria-busy="true"] .button-icon{display:none}
.login-submit[aria-busy="true"] .button-text{opacity:.75}

/* Code step */
.back-link{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 10px 8px 0;margin:-8px 0 -6px;color:var(--muted);font-size:14px;font-weight:500;transition:color .18s}
.back-link:hover{color:var(--ink)}
.back-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.2,0,0,1)}
.back-link:hover svg{transform:translateX(-2px)}
.code-title{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.code-sent{margin:-10px 0 0;font-size:14px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.code-sent b{color:var(--ink);font-weight:550;overflow-wrap:anywhere}

/* One real input laid over six drawn cells: paste, autofill and screen readers
   see a normal text field. */
.otp{position:relative}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;color:transparent;caret-color:transparent;z-index:1;cursor:text}
/* Two groups of three, split by an empty 4px column, read like 123 456. */
.otp-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 4px repeat(3,minmax(0,1fr));gap:8px}
.otp-cells span:nth-child(4){grid-column:5}
.otp-cells span:nth-child(5){grid-column:6}
.otp-cells span:nth-child(6){grid-column:7}
.otp-cells span{position:relative;display:grid;place-items:center;height:62px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);transition:box-shadow .16s,background .16s}
.otp-cells span[data-filled="true"]{animation:digit-in .18s cubic-bezier(.2,0,0,1)}
@keyframes digit-in{from{transform:scale(.9);opacity:.4}}
.otp[data-focused="true"] .otp-cells span[data-current="true"]{box-shadow:0 0 0 2px var(--pen)}
.otp[data-focused="true"] .otp-cells span[data-current="true"]:not([data-filled="true"]):after{content:'';width:2px;height:28px;border-radius:1px;background:var(--pen);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.otp[data-state="error"] .otp-cells span,.otp[data-state="error"][data-focused="true"] .otp-cells span[data-current="true"]{box-shadow:0 0 0 1.5px #c0533f;background:#fffafa}
.otp[data-state="busy"] .otp-cells span{color:var(--muted)}
.otp[data-state="success"] .otp-cells span{box-shadow:0 0 0 1.5px var(--pen);background:var(--mint)}

.resend{margin:0;font-size:14px;line-height:1.5;color:var(--muted);min-height:32px;display:flex;align-items:center}
.resend .link-button{padding:6px 0}
.tabular{font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .login{grid-template-columns:1fr;align-items:start;align-content:start;gap:28px;padding-top:8px}
  .login-intro h1{font-size:clamp(36px,8vw,52px)}
  .login-intro .lead{margin-top:14px}
  .login-hand{display:none}
  .login-panel{max-width:520px;width:100%}
}
@media (max-width:560px){
  .topbar{min-height:64px;padding-inline:16px}
  .login{padding:4px 16px 40px}
  .login-intro h1{font-size:36px;letter-spacing:-.04em}
  .login-intro .lead{font-size:15px}
  .login-panel{padding:22px 18px;border-radius:24px}
  .otp-cells{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr)) 2px repeat(3,minmax(0,1fr))}
  .otp-cells span{height:54px;font-size:24px;border-radius:12px}
  .code-title{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .login-step[data-active="true"],.otp-cells span[data-filled="true"]{animation:none}
  .provider,.login-submit,.back-link svg,.login-submit .button-icon{transition:none}
}