/* nurel auth pages (/sign-in, /sign-up, /get-started): split screen.
   Left: paper panel with the logo, stepper, headline and the Clerk / site / setup / ready cards.
   Right: .auth-film, the stage-dark panel; a build step injects <picture>+<video> into the
   media:auth markers, until then a CSS-only Nuri floats there. Tokens come from /css/site.css. */

body{min-height:100vh;background:var(--paper)}
.auth{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:100vh}

/* ---- left panel ---- */
.auth-panel{display:flex;align-items:center;justify-content:center;padding:44px 28px;background:var(--paper)}
.auth-inner{width:100%;max-width:440px}
.auth-logo{color:var(--ink);margin-bottom:40px}

/* mode copy: the page already flags sign-in with body.mode-signin */
.if-signin{display:none}
body.mode-signin .if-signin{display:inline}
body.mode-signin .if-signup{display:none}

/* stepper (sign-up path only): Account -> Your site -> Setup; state via body[data-auth-state] */
.stepper{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;margin:0 0 26px;font:600 13px/1 var(--text);color:var(--muted)}
.stepper li{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.stepper-dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s,box-shadow .2s}
body.mode-signin .stepper{display:none}
[data-auth-state="auth"] .stepper li:nth-child(1),
[data-auth-state="form"] .stepper li:nth-child(2),
[data-auth-state="provisioning"] .stepper li:nth-child(3),
[data-auth-state="success"] .stepper li:nth-child(3){color:var(--ink)}
[data-auth-state="auth"] .stepper li:nth-child(1) .stepper-dot,
[data-auth-state="form"] .stepper li:nth-child(2) .stepper-dot,
[data-auth-state="provisioning"] .stepper li:nth-child(3) .stepper-dot{background:var(--amber-2);box-shadow:0 0 0 4px rgba(255,138,26,.22)}
[data-auth-state="form"] .stepper li:nth-child(1) .stepper-dot,
[data-auth-state="provisioning"] .stepper li:nth-child(-n+2) .stepper-dot,
[data-auth-state="success"] .stepper li .stepper-dot{background:var(--ink)}
[data-auth-state="form"] .stepper li:nth-child(1),
[data-auth-state="provisioning"] .stepper li:nth-child(-n+2),
[data-auth-state="success"] .stepper li{color:var(--ink-2)}

/* headline: h-l scale, capped for the 440px column */
.auth-head h1{font-size:clamp(34px,3.6vw,52px)}
.auth-sub{margin:14px 0 0;color:var(--ink-2);font-size:17px}
/* once the account exists the card carries its own title */
body:not([data-auth-state="auth"]) .auth-head{display:none}

/* ---- card ---- */
.auth-card{margin-top:30px}
body:not([data-auth-state="auth"]) .auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
#clerk-mount{display:flex;justify-content:center}
#clerk-mount > *{max-width:100%}
#clerk-mount,#clerk-mount .cl-rootBox,#clerk-mount .cl-cardBox,#clerk-mount .cl-card{max-width:100% !important;min-width:0 !important;width:100%}
#clerk-mount .cl-cardBox{box-shadow:none !important}

.card-title{font-size:26px;margin:0 0 6px}
.card-sub{margin:0;color:var(--ink-2);font-size:15.5px}

/* your-site form */
.form-welcome{margin:0 0 22px;font-weight:600;color:var(--ink)}
.form-group{margin-bottom:16px}
.form-label{display:block;font:600 13.5px/1 var(--text);color:var(--ink-2);margin-bottom:8px}
.url-preview{margin:8px 0 0;font:500 14px/1.4 var(--text);color:var(--muted);overflow-wrap:anywhere}
.url-preview span{color:var(--ink);font-weight:700}
.form-error{display:none;margin:14px 0 0;padding:10px 12px;border:1px solid #d9493a;border-radius:var(--r-sm);background:#fff3f0;color:#8f1d14;font:500 14px/1.45 var(--text)}
.form-error a{color:inherit;font-weight:700}

/* buttons: .btn-primary mirrors .btn-ink (the create button's class list is pinned by tests) */
.auth .btn{width:100%}
.auth .btn-lg{height:54px;font-size:16.5px}
.auth .btn-primary{background:var(--ink);color:#fff}
.auth .btn-primary:hover{background:#2b231e}
.auth .btn-primary[disabled]{opacity:.6;cursor:default}
.auth .btn-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.auth .btn-secondary:hover{background:var(--cream)}
.auth .btn + .btn{margin-top:10px}
#create-btn{margin-top:6px}

/* setup checklist */
.provisioning-spinner{display:block;height:3px;border-radius:2px;margin:16px 0 12px;background-color:var(--cream);background-image:linear-gradient(90deg,transparent,var(--amber-2),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:sweep 1.4s ease-in-out infinite}
@keyframes sweep{0%{background-position:-60% 0}100%{background-position:160% 0}}
.provisioning-steps{list-style:none;margin:18px 0 16px;padding:0;display:grid;gap:4px}
.provisioning-steps li{position:relative;display:flex;align-items:center;gap:12px;padding:10px 44px 10px 12px;border-radius:12px;color:var(--muted);font:500 15px/1.35 var(--text);transition:background .2s,color .2s}
.provisioning-step-dot{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);font:700 12px var(--text);color:var(--muted);background:#fff}
.provisioning-steps li.current{color:var(--ink);background:var(--cream);font-weight:600}
.provisioning-steps li.current .provisioning-step-dot{border-color:var(--amber-2);color:var(--ink)}
.provisioning-steps li.complete{color:var(--ink-2)}
.provisioning-steps li.complete .provisioning-step-dot{border-color:var(--ink);background:var(--ink);color:#fff}
/* mini Nuri beside the active step (eyes + glow are gradient layers) */
.provisioning-steps li.current::after{content:"";position:absolute;right:12px;top:50%;width:24px;height:24px;margin-top:-12px;background:url(/img/nuri-face.svg) center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(255,181,71,.6));animation:bob 2.4s ease-in-out infinite}
.note{margin:0;font-size:13px;color:var(--muted)}
#provisioning-actions{display:none;flex-direction:column;gap:10px;margin-top:18px}

/* ready */
.success-mark{width:58px;height:64px;margin:0 0 14px;background:url(/img/nuri.svg) center/contain no-repeat}
#success .card-sub{margin-bottom:20px;overflow-wrap:anywhere}
#cms-url{color:var(--ink);font-weight:700}
.next{margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

.auth-foot{margin:22px 0 0;font-size:14px;color:var(--muted)}
.auth-foot a{color:var(--ink);font-weight:700}
body:not([data-auth-state="auth"]) .auth-foot{display:none}

/* ---- right panel: the film ---- */
.auth-film{position:relative;overflow:hidden;min-height:100vh;background:var(--stage);background-image:radial-gradient(70% 60% at 50% 58%,rgba(255,138,26,.26),transparent 70%),radial-gradient(70% 50% at 50% 100%,#3a1e0d,transparent 72%)}
.auth-film picture,.auth-film img,.auth-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;z-index:2}
.nuri{position:absolute;left:50%;top:50%;width:140px;height:155px;margin:-78px 0 0 -70px;z-index:1;background:url(/img/nuri.svg) center/contain no-repeat;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.auth-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(8,6,5,.78),rgba(8,6,5,0))}
.auth-caption{position:absolute;left:40px;bottom:36px;z-index:3;margin:0;max-width:22ch;color:#fff;font:700 clamp(20px,1.7vw,26px)/1.15 var(--display);letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.45)}

@media (prefers-reduced-motion:reduce){
  .nuri,.provisioning-steps li.current::after,.provisioning-spinner{animation:none}
}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-film{display:none}
  .auth-panel{align-items:flex-start;padding:32px 20px 48px}
  .auth-logo{margin-bottom:28px}
  body:not([data-auth-state="auth"]) .auth-card{padding:22px 18px}
}
.plan-note{margin:-10px 0 20px;padding:10px 14px;border-radius:12px;background:#fff6e6;border:1px solid #f3dcae;font-size:14.5px;color:var(--ink-2)}
.plan-note b{color:var(--ink)}