/* ==========================================================================
   AUTH — sign-in screen: the gradient panel and the credential card.
   ========================================================================== */
/* ============ TOKENS (same set as the site) ============ */
/* ============ URDU MODE ============ */
body.ur{font-family:"Noto Nastaliq Urdu", serif;line-height:2.5;font-size:15px}
body.ur h1{line-height:2}
body.ur h2{line-height:2}
body.ur p{line-height:2.5}
body.ur .eyebrow{letter-spacing:0;text-transform:none;line-height:2.1;font-size:12.5px}
body.ur .field-label{line-height:2;font-size:14px}
body.ur .field-note,body.ur .hint,body.ur .msg{line-height:2.1}
body.ur .promise b{line-height:1.9}
body.ur .promise span{line-height:2.2}
body.ur .top-back,body.ur .foot-line{line-height:1.9}
body.ur input{font-family:var(--body)}
/* IDs and passwords stay latin */
/* ============ LAYOUT ============
   The chrome and the footer come from components.css (partials/topbar and
   partials/footer), so the column below only has to push the footer down. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.auth{
  flex:1;display:grid;grid-template-columns:1fr 430px;
  align-items:center;column-gap:0;
  width:min(1180px,100% - 48px);margin:0 auto;
  padding-block:clamp(20px,4vh,48px) clamp(28px,5vh,64px);
}
/* ---- left: the gradient panel ---- */
.panel{
  position:relative;overflow:hidden;
  grid-column:1;grid-row:1;
  margin-inline-end:-60px;
  border-radius:var(--r-lg);
  padding:56px 108px 56px 52px;min-height:520px;
  display:flex;flex-direction:column;
  color:#fff;
  background:
    radial-gradient(880px 560px at 86% -10%, rgba(72,138,238,.52), transparent 62%),
    radial-gradient(760px 660px at 0% 108%, rgba(198,144,46,.42), transparent 66%),
    radial-gradient(520px 400px at 98% 86%, rgba(233,182,102,.20), transparent 70%),
    linear-gradient(163deg,#071A38 0%,#0E2E60 44%,#17509A 100%);
  box-shadow:var(--shadow-2);
}
html[dir="rtl"] .panel{padding:56px 52px 56px 108px}
/* the warm sweep that drifts across the panel — this is the golden effect */
.beam{
  position:absolute;inset:-40% -70%;z-index:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 40%,rgba(160,200,255,.10) 47%,rgba(244,208,142,.16) 52%,transparent 61%);
  animation:beam 12s ease-in-out infinite;will-change:transform;
}
@keyframes beam{
  0%,100%{transform:translateX(-34%)}
  50%{transform:translateX(34%)}
}
.panel-in{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;max-width:400px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#F2CB80;margin-bottom:18px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#F2CB80;display:block;flex:none;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.75)}
}
.panel h2{
  font-family:var(--display);font-size:clamp(27px,2.7vw,35px);font-weight:600;
  line-height:1.15;letter-spacing:-.018em;
}
.panel h2 em{font-style:normal;color:#F5CE86}
.panel > .panel-in > p{margin-top:16px;color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.7}
.promises{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:18px}
.promise{display:flex;gap:13px;align-items:flex-start}
.promise-ico{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:#BFD6F7;
}
.promise-ico svg{width:17px;height:17px}
.promise b{display:block;font-size:14.5px;font-weight:700;color:#fff;line-height:1.4}
.promise span{display:block;font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.55;margin-top:2px}
.safety{
  margin-top:auto;padding-top:30px;
  display:flex;gap:11px;align-items:flex-start;
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.74);
}
.safety svg{width:15px;height:15px;flex:none;margin-top:3px;color:#F2CB80}
body.ur .safety{line-height:2.1}
/* ---- right: the form, spilling over the panel edge ---- */
.formside{grid-column:2;grid-row:1;display:flex;justify-content:center;position:relative;z-index:3}
.card{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:42px 40px 34px;
  box-shadow:var(--shadow-card);
}
.card h1{
  font-family:var(--display);font-size:clamp(25px,2.4vw,31px);font-weight:600;
  line-height:1.15;letter-spacing:-.018em;
}
.card > p.hint{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
/* ---- form ---- */
.form{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.input-shell{position:relative;display:flex;align-items:center}
.input-shell > svg{
  position:absolute;inset-inline-start:15px;width:17px;height:17px;
  color:var(--ink-3);pointer-events:none;transition:color .2s;
}
input[type="text"],input[type="password"]{
  width:100%;font:inherit;font-family:var(--body);
  font-size:15.5px;letter-spacing:.01em;color:var(--ink);
  background:var(--mist);
  border:1.5px solid var(--line);border-radius:14px;
  padding-block:13px;padding-inline:44px 15px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
input::placeholder{color:#A9B7C9;letter-spacing:.04em}
/* Gated on a real pointer — a touch screen fakes a hover on tap and leaves it
   stuck, so the control sits there lit up after the finger has gone. */
@media (hover:hover){ input:hover{border-color:#CFDCEF} }
input:focus{
  outline:none;background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(27,79,166,.12);
}
.input-shell:focus-within > svg{color:var(--blue)}
#password{padding-inline-end:52px}
.peek{
  position:absolute;inset-inline-end:6px;
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;color:var(--ink-3);
  transition:background .2s,color .2s;
}
@media (hover:hover){ .peek:hover{background:var(--blue-soft);color:var(--blue)} }
.peek svg{width:19px;height:19px}
.peek .off{display:none}
.peek.on .off{display:block}
.peek.on .on-eye{display:none}
.field-note{
  display:none;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--danger);
}
.field-note svg{width:14px;height:14px;flex:none}
.field.bad input{border-color:#E4A7A4;background:var(--danger-soft)}
.field.bad .field-note{display:flex}
.caps{
  display:none;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--gold);
}
.caps svg{width:14px;height:14px;flex:none}
.caps.show{display:flex}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:-2px}
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--ink-2);font-weight:500}
.check input{position:absolute;opacity:0;width:0;height:0}
.box{
  width:19px;height:19px;border-radius:6px;flex:none;
  border:1.5px solid #C7D5E8;background:#fff;
  display:grid;place-items:center;transition:.2s var(--ease);
}
.box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:.2s var(--ease)}
.check input:checked + .box{background:var(--blue);border-color:var(--blue)}
.check input:checked + .box svg{opacity:1;transform:none}
.check input:focus-visible + .box{outline:2.5px solid var(--blue);outline-offset:3px}
.link-sm{font-size:13.5px;font-weight:600;color:var(--blue);transition:color .2s}
@media (hover:hover){ .link-sm:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px} }
/* the form-level message (wrong credentials, locked out, etc.) */
.msg{
  display:none;gap:10px;align-items:flex-start;
  border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.55;
  border:1px solid;
}
.msg.show{display:flex}
.msg svg{width:16px;height:16px;flex:none;margin-top:2px}
.msg.err{background:var(--danger-soft);border-color:#F0CDCB;color:#8E1B18}
.msg.ok{background:#EDF9F1;border-color:#BFE7CC;color:#0B7A36}
.spinner{
  width:16px;height:16px;flex:none;display:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
/* ---- below the form ---- */
.sep{display:flex;align-items:center;gap:14px;margin-top:26px;color:var(--ink-3);font-size:12px;font-weight:600}
.sep::before,.sep::after{content:"";height:1px;background:var(--line);flex:1}
body.ur .sep{font-size:13px;line-height:2}
.help{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:18px;padding:12px 18px;width:100%;
  border:1.5px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease);
}
@media (hover:hover){ .help:hover{border-color:var(--wa);color:#0B7A36;background:rgba(37,211,102,.06);transform:translateY(-2px)} }
.help svg{width:17px;height:17px;flex:none;color:var(--wa)}
body.ur .help{line-height:1.9;padding-block:11px}
.foot-line{
  margin-top:22px;text-align:center;font-size:13.5px;color:var(--ink-2);
}
.foot-line a{color:var(--blue);font-weight:700}
@media (hover:hover){ .foot-line a:hover{text-decoration:underline;text-underline-offset:3px} }
/* ============ ONE SCREEN (desktop) ============
   The sign-in has to sit inside the viewport on a laptop — no page scroll.
   Above 1040px, where the panel and the card stand side by side, the column
   is pinned to the viewport, every fixed gap becomes vh-aware so the layout
   breathes on a tall screen and tightens on a short one, and the four-column
   footer folds down to its bottom line.

   The page itself never scrolls; .auth keeps an overflow of its own so a very
   long string (an Urdu error, a long site address) scrolls in place instead of
   being clipped. Guarded on a sane viewport height — anything shorter than
   620px goes back to the normal scrolling page, where clamping would only
   squeeze the form into something unusable. */
@media (min-width:1041px) and (min-height:620px){
  body{height:100svh;overflow:hidden}

  .auth{
    min-height:0;overflow:auto;
    align-items:safe center;
    padding-block:clamp(10px,2vh,40px);
  }

  /* left panel */
  .panel{min-height:0;padding-block:clamp(26px,4.6vh,56px)}
  .panel > .panel-in > p{margin-top:clamp(10px,1.7vh,16px)}
  .promises{margin-top:clamp(16px,3.2vh,34px);gap:clamp(10px,1.7vh,18px)}
  .safety{padding-top:clamp(14px,2.8vh,30px)}

  /* right card */
  .card{padding:clamp(22px,3.8vh,42px) 40px clamp(18px,3.2vh,34px)}
  .card h1{font-size:clamp(23px,2.2vw,31px)}
  .card > p.hint{margin-top:clamp(8px,1.3vh,12px)}
  .form{margin-top:clamp(14px,2.4vh,28px);gap:clamp(9px,1.6vh,18px)}
  input[type="text"],input[type="password"]{padding-block:clamp(10px,1.7vh,13px)}
  .sep{margin-top:clamp(12px,2.2vh,26px)}
  .help{margin-top:clamp(9px,1.6vh,18px);padding-block:clamp(9px,1.6vh,12px)}
  .foot-line{margin-top:clamp(10px,2vh,22px)}

  /* the footer keeps only its bottom line — a slim strip, ~40px */
  .site-foot{padding-top:0}
  .site-foot-grid{display:none}
  .site-foot-bot{border-top:none;padding:clamp(9px,1.5vh,16px) 0}

  /* Nastaliq asks for a generous line-height, which is exactly what a short
     screen cannot spare. Every one of these is pulled back only as far as the
     script still reads comfortably — a 1366×768 laptop is about 100px short of
     the Urdu page otherwise, and that is where the difference comes from. */
  body.ur{line-height:2.1}
  body.ur p,body.ur .promise span{line-height:1.9}
  body.ur .safety,body.ur .site-foot-bot,body.ur .sep,body.ur .help{line-height:1.8}
  body.ur h1,body.ur h2,body.ur .promise b{line-height:1.7}
  body.ur .field-label{line-height:1.6}
  body.ur .field-note,body.ur .hint,body.ur .msg{line-height:1.8}
  body.ur .top-back,body.ur .foot-line{line-height:1.7}
}

/* A 1366×768 laptop — still the most common one out there — leaves about 650px
   between the chrome and the footer strip, and the Urdu page does not fit in it
   on the clamps above. Everything tightens one more notch here rather than
   dropping a promise or a line of copy off the screen. */
@media (min-width:1041px) and (min-height:620px) and (max-height:820px){
  .auth{padding-block:clamp(6px,1.2vh,16px)}
  .panel{padding-block:clamp(20px,3.2vh,32px)}
  .promises{margin-top:clamp(12px,2.2vh,22px);gap:clamp(8px,1.2vh,13px)}
  .safety{padding-top:clamp(10px,1.8vh,18px)}
  .card{padding:clamp(16px,2.6vh,24px) 34px clamp(14px,2.2vh,20px)}
  .card h1{font-size:clamp(21px,2vw,26px)}
  .form{margin-top:clamp(10px,1.6vh,16px);gap:clamp(7px,1.1vh,12px)}
  .sep{margin-top:clamp(9px,1.5vh,16px)}
  .help{margin-top:clamp(7px,1.2vh,13px);padding-block:clamp(7px,1.2vh,10px)}
  .foot-line{margin-top:clamp(8px,1.4vh,14px)}
}

/* Below ~740px it is the left panel, not the card, that runs over — its three
   promises and the safety note are the tallest column on the page. */
@media (min-width:1041px) and (min-height:620px) and (max-height:740px){
  .panel{padding-block:clamp(16px,2.3vh,24px)}
  .panel h2{font-size:clamp(24px,2.3vw,30px)}
  .promises{margin-top:clamp(10px,1.8vh,18px);gap:clamp(7px,1vh,11px)}
  .safety{padding-top:clamp(8px,1.3vh,14px)}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .auth{grid-template-columns:1fr;gap:0;width:min(560px,100% - 40px)}
  .panel{
    grid-column:1;grid-row:1;margin-inline-end:0;
    min-height:0;padding:34px 32px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  html[dir="rtl"] .panel{padding:34px 32px}
  .panel-in{max-width:none}
  .promises{display:none}
  .safety{margin-top:22px;padding-top:0}
  .card{
    width:100%;
    border-radius:0 0 var(--r-lg) var(--r-lg);
    border-top:none;box-shadow:var(--shadow-2);
  }
  .formside{grid-column:1;grid-row:2;display:block}
}
@media (max-width:520px){
  .auth{width:100% - 0px;width:calc(100% - 32px);padding-block:8px 26px}
  .panel{padding:26px 22px;border-radius:22px 22px 0 0}
  html[dir="rtl"] .panel{padding:26px 22px}
  .panel h2{font-size:23px}
  .panel > .panel-in > p{font-size:14.5px;margin-top:12px}
  .card{padding:28px 22px 26px;border-radius:0 0 22px 22px}
  .card h1{font-size:23px}
  .row{gap:10px}
}