/* Organizer sign-in (views/partials/auth_top.ejs).
   The public site's look: white page, ink type, rules instead of shadows,
   hard 4–6px corners, one blue (--accent, the domain's brand colour, set on
   <body>). The card carries a flat ink offset instead of a soft shadow, and
   the mascot peeks over its top edge. */

:root{--ink:#0d0d0f;--ink-soft:#3a3a40;--muted:#6b6b72;--line:#e4e4e8;--paper:#fff;--err:#c2321b}
*{box-sizing:border-box}
html,body{margin:0}
body.au{
  min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font-family:'Heebo','Inter','IBM Plex Sans Arabic',system-ui,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased
}
html[lang=ar] body.au{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
a{color:inherit}

/* Top bar: brand, languages, back to the site. */
.au-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
.au-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.au-brand img{width:36px;height:36px;border-radius:8px;flex:none;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.au-brand:hover img{transform:rotate(-10deg) scale(1.08)}
.au-word{font-family:'Rubik','Heebo','IBM Plex Sans Arabic',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap}
.au-word b{font-weight:800;color:var(--word);margin-inline-start:.06em}
.au-tools{display:flex;align-items:center;gap:14px;font-size:.88rem;font-weight:600}
.au-langs{display:flex;gap:2px;background:#f1f3f6;border-radius:999px;padding:3px}
.au-langs a{padding:5px 12px;border-radius:999px;text-decoration:none;color:var(--ink-soft)}
.au-langs a:hover{background:#e3e7ee}
.au-langs a.on{background:var(--ink);color:#fff}
.au-langs .l-short{display:none}
.au-back{text-decoration:none;white-space:nowrap}
.au-back:hover{color:var(--accent)}

/* Main: the pitch beside the card; stacked on narrow screens. */
.au-main{flex:1;width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr minmax(0,440px);
  gap:clamp(32px,7vw,110px);align-items:center;padding:clamp(56px,10vh,110px) clamp(16px,4vw,40px) clamp(40px,8vh,80px)}
.au-hero h1{margin:0;font-family:'Rubik','Heebo','IBM Plex Sans Arabic',sans-serif;font-weight:700;
  font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.025em}
html[lang=ar] .au-hero h1{line-height:1.25}
.au-hero h1 span{color:var(--accent)}
.au-hero p{margin:22px 0 0;max-width:44ch;color:var(--ink-soft);font-size:1.08rem;font-weight:500}
.au-points{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:2px solid var(--ink);display:grid;gap:12px;max-width:440px}
.au-points li{display:flex;align-items:center;gap:12px;font-weight:600}
.au-points i{flex:none;width:22px;height:22px;border-radius:3px;background:var(--ink);position:relative}
.au-points i::after{content:"";position:absolute;inset:6px 5px 7px 6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}

/* The card. */
.au-card{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:30px 30px 24px;
  box-shadow:6px 6px 0 var(--ink)}
[dir=rtl] .au-card{box-shadow:-6px 6px 0 var(--ink)}
.au-step{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.au-bars{display:flex;gap:5px}
.au-bars i{width:26px;height:4px;border-radius:2px;background:var(--line)}
.au-bars i.on{background:var(--accent)}
.au-card h2{margin:0;font-family:'Rubik','Heebo','IBM Plex Sans Arabic',sans-serif;font-size:1.65rem;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.au-lead{margin:8px 0 0;color:var(--ink-soft)}
.au-lead bdi{white-space:nowrap}
.au-form{display:grid;gap:8px;margin-top:22px}
.au-form label{font-size:.85rem;font-weight:700}
.au-form input{width:100%;height:58px;padding:0 16px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);
  font:600 1.3rem 'Inter','Heebo',sans-serif;letter-spacing:.03em;outline:none;transition:border-color .15s,box-shadow .15s}
[dir=rtl] .au-form input{text-align:right}
.au-form input::placeholder{color:#b9b9c0;font-weight:500}
.au-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.au-form input.au-code{height:66px;text-align:center;font-size:2rem;letter-spacing:.55em;padding-inline-start:.55em;font-variant-numeric:tabular-nums}
.au-btn{margin-top:10px;height:56px;border:0;border-radius:4px;background:var(--accent);color:#fff;font:800 1.02rem 'Rubik','Heebo','IBM Plex Sans Arabic',sans-serif;
  cursor:pointer;transition:background .15s,transform .12s}
.au-btn:hover{background:var(--ink)}
.au-btn:active{transform:scale(.98)}
.au-btn:disabled{cursor:progress;background:var(--ink)}
.au-btn.is-busy::before{content:"";display:inline-block;width:15px;height:15px;margin-inline-end:10px;vertical-align:-2px;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:au-spin .7s linear infinite}
.au-err{margin-top:16px;padding:11px 14px;border-inline-start:4px solid var(--err);background:#fdeeea;color:#7e1f10;font-weight:600;font-size:.92rem}
.au-info{margin-top:16px;padding:11px 14px;border-inline-start:4px solid var(--accent);background:#eef5fc;font-size:.9rem}
.au-note{margin:16px 0 0;color:var(--muted);font-size:.86rem}
.au-alt{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem;font-weight:600}
.au-alt a{text-decoration:none}
.au-alt a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.au-foot{padding:18px;text-align:center;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}

/* The mascot, peeking over the card's top edge near its far corner.
   The body is clipped at the edge (clipPath in the SVG); the hands rest on it. */
.lk{position:absolute;bottom:calc(100% - 10.6px);inset-inline-end:26px;width:106px;height:74.2px;pointer-events:none}
.lk svg{display:block;width:100%;height:100%;overflow:visible}
.lk *{transform-box:view-box}
.lk .lk-head{transform-origin:60px 80px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.lk .lk-eyes{transform-origin:60px 34px}
.lk .lk-pupils{transition:transform .2s ease-out}
.lk .lk-hand{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.lk .lk-hand--l{transform-origin:28px 72px}
.lk .lk-hand--r{transform-origin:92px 72px}
.lk .lk-frown{opacity:0}
.lk .lk-smile,.lk .lk-frown{transition:opacity .15s}
/* Code step, code field focused: both hands over the eyes. */
.au-card.is-shy .lk-hand--l{transform:translate(21px,-38px) scale(1.3)}
.au-card.is-shy .lk-hand--r{transform:translate(-21px,-38px) scale(1.3)}
/* A wrong number or code: it frowns. */
.au-card.is-err .lk-smile{opacity:0}
.au-card.is-err .lk-frown{opacity:1}
/* "Not peeking!" — beside the head, toward the middle of the card. */
.lk-say{position:absolute;top:0;inset-inline-end:calc(100% - 6px);white-space:nowrap;background:var(--ink);color:#fff;
  font-weight:800;font-size:.82rem;padding:5px 10px;border-radius:4px;opacity:0;scale:.6;
  transform-origin:right center;transition:opacity .15s,scale .25s cubic-bezier(.3,1.7,.5,1)}
[dir=rtl] .lk-say{transform-origin:left center}
.lk-say::after{content:"";position:absolute;top:50%;margin-top:-5px;inset-inline-start:100%;border:5px solid transparent;border-inline-start-color:var(--ink)}
.au-card.is-saying .lk-say{opacity:1;scale:1}

@keyframes au-spin{to{transform:rotate(360deg)}}
@keyframes au-rise{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes au-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes au-card{0%{opacity:0;transform:translateY(30px) rotate(1.5deg)}70%{opacity:1;transform:translateY(-3px)}100%{transform:none}}
@keyframes lk-rise{0%{transform:translateY(60px)}70%{transform:translateY(-5px)}100%{transform:none}}
@keyframes lk-wave{0%{transform:none}12%{transform:translate(9px,-32px)}24%{transform:translate(15px,-34px)}36%{transform:translate(5px,-32px)}48%{transform:translate(15px,-34px)}62%{transform:translate(7px,-32px)}80%,100%{transform:none}}
@keyframes lk-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.08)}}
@keyframes lk-shake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(5px) rotate(3deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(2px)}}
@keyframes au-tick{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}

@media (prefers-reduced-motion:no-preference){
  .au-hero h1{animation:au-rise .8s cubic-bezier(.2,.8,.2,1) .05s backwards}
  .au-hero h1 span{display:inline-block;animation:au-rise .8s cubic-bezier(.2,.8,.2,1) .25s backwards}
  .au-hero p{animation:au-up .7s cubic-bezier(.2,.8,.2,1) .4s backwards}
  .au-points li{animation:au-up .6s cubic-bezier(.2,.8,.2,1) backwards}
  .au-points li:nth-child(1){animation-delay:.55s}.au-points li:nth-child(2){animation-delay:.67s}.au-points li:nth-child(3){animation-delay:.79s}
  .au-points li i{animation:au-tick .5s cubic-bezier(.3,1.5,.5,1) backwards}
  .au-points li:nth-child(1) i{animation-delay:.7s}.au-points li:nth-child(2) i{animation-delay:.82s}.au-points li:nth-child(3) i{animation-delay:.94s}
  .au-card{animation:au-card .7s cubic-bezier(.2,.8,.2,1) .15s backwards}
  .lk .lk-body{animation:lk-rise .55s cubic-bezier(.2,.9,.3,1.2) .75s backwards}
  .lk .lk-hand{animation:au-up .35s ease-out 1.05s backwards}
  .au-card[data-step="1"] .lk-hand--r{animation:au-up .35s ease-out 1.05s backwards,lk-wave 1.5s ease-in-out 1.35s}
  .lk .lk-eyes{animation:lk-blink 3.6s linear 2s infinite}
  .au-card.is-err .lk-head{animation:lk-shake .6s ease-in-out .9s}
}

@media (max-width:900px){
  .au-main{grid-template-columns:1fr;gap:56px;padding-top:36px;max-width:520px}
  .au-hero h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .au-hero p{margin-top:14px;font-size:1rem}
  .au-points{display:none}
}
@media (max-width:520px){
  .au-top{padding:12px 16px}
  .au-word{font-size:1.1rem}
  .au-brand img{width:30px;height:30px}
  .au-back{display:none}
  .au-langs a{padding:5px 9px;font-size:.78rem}
  .au-langs .l-long{display:none}
  .au-langs .l-short{display:inline}
  .au-card{padding:26px 20px 20px;box-shadow:4px 4px 0 var(--ink)}
  [dir=rtl] .au-card{box-shadow:-4px 4px 0 var(--ink)}
  .lk{inset-inline-end:16px;width:92px;height:64.4px;bottom:calc(100% - 9.2px)}
}