/* ============================================================================
   auth.css - sign-in page (app/views/auth/login.php)

   Loaded AFTER landing.css, which owns the palette tokens, the type roles
   (.disp/.lede/.eyebrow/.mono), the paper ground and the .btn family. Nothing
   here redefines a colour literal: the sign-in screen has to be the landing
   page with a form on it, so it inherits and never forks the palette.

   The one departure from the drafted-sheet grammar is the radius. Buttons,
   inputs and the card itself carry soft edges - a form is something you press
   and type into, not another ruled box.
   ========================================================================== */

.auth{min-height:100vh;display:flex;flex-direction:column;}
.auth-shell{flex:1;display:flex;flex-direction:column;padding-top:34px;padding-bottom:40px;position:relative;}
.auth .hero-inner{padding-top:0;}

/* ---------- masthead: brand on the left, the way home on the right ---------- */
.auth .masthead{padding-bottom:52px;}
.back-home{gap:8px;}
.back-home .arrow{font-size:14px;line-height:1;display:inline-block;}
[dir="rtl"] .back-home .arrow{transform:scaleX(-1);}

/* ---------- the split ---------- */
.auth-grid{
  display:grid;grid-template-columns:1fr;gap:44px;align-items:center;flex:1;
}
@media (min-width:960px){
  .auth-grid{grid-template-columns:1.05fr .95fr;gap:64px;}
}

.auth-intro{display:flex;flex-direction:column;gap:24px;}
.auth-intro h1.disp{font-size:clamp(34px,4.4vw,52px);}
.auth-intro .lede{font-size:18px;}
.auth-intro .hl{color:var(--blue);}

/* The three facts read as the chain legs do on the landing page: a rule, a
   tracked mono label, then the plain line underneath. */
.auth-facts{
  display:grid;grid-template-columns:1fr;border:1px solid var(--rule);
  background:var(--plate);border-radius:14px;overflow:hidden;box-shadow:var(--plate-shadow);
}
@media (min-width:560px){.auth-facts{grid-template-columns:repeat(3,1fr);}}
.auth-fact{
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;
  border-bottom:1px solid var(--rule-soft);
}
.auth-fact:last-child{border-bottom:0;}
@media (min-width:560px){
  .auth-fact{border-bottom:0;border-inline-end:1px solid var(--rule-soft);}
  .auth-fact:last-child{border-inline-end:0;}
}
.auth-fact .n{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-weight:700;
  font-size:19px;letter-spacing:-.02em;color:var(--navy);
}
:root[data-theme="dark"] .auth-fact .n{color:var(--ink);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .auth-fact .n{color:var(--ink);}}
.auth-fact .l{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.auth-fact .s{font-size:14px;line-height:1.45;color:var(--ink-2);}

/* ---------- the card ---------- */
.auth-card-col{display:flex;justify-content:center;}
@media (min-width:960px){.auth-card-col{justify-content:flex-end;}}

.auth-card{
  width:100%;max-width:460px;background:var(--plate);
  border:1px solid var(--rule);border-radius:18px;box-shadow:var(--plate-shadow);
  padding:34px 32px 30px;display:flex;flex-direction:column;
}
@media (max-width:480px){.auth-card{padding:28px 22px 26px;}}
.auth-card-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.auth-card-head h2{
  font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;
  font-weight:800;font-size:27px;letter-spacing:-.022em;line-height:1.1;margin:0;
}
.auth-card-head .sub{font-size:15px;color:var(--ink-2);}

/* ---------- form ---------- */
.auth-form{display:flex;flex-direction:column;gap:14px;}
.field{position:relative;display:block;}
.field .ico{
  position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:15px;
  display:flex;align-items:center;pointer-events:none;color:var(--ink-3);
}
.field .ico svg{width:17px;height:17px;}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"]{
  width:100%;font-family:inherit;font-size:15px;font-weight:400;color:var(--ink);
  background:var(--plate-2);border:1px solid var(--rule);border-radius:12px;
  padding:14px 16px;padding-inline-start:44px;outline:none;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.field input::placeholder{color:var(--ink-3);opacity:1;}
.field input:focus{
  border-color:var(--blue);background:var(--plate);
  box-shadow:0 0 0 3px var(--wash-a);
}
.field:focus-within .ico{color:var(--blue);}

.peek{
  position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:12px;
  display:flex;align-items:center;justify-content:center;padding:6px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--ink-3);
  transition:color .18s ease,background .18s ease;
}
.peek:hover{color:var(--ink);background:var(--plate-2);}
.peek svg{width:17px;height:17px;}

.auth-options{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-size:14px;margin:2px 0 4px;
}
.remember{display:flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer;user-select:none;}
.remember input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;}
.forgot{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:12px;letter-spacing:.04em;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;
}
.forgot:hover{color:var(--ink);border-bottom-color:var(--blue);}

.btn-block{width:100%;}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}
/* A <button> does not inherit the page font, and .btn alone loses to the UA
   rule, so the mono face is restated here at button specificity. */
button.btn{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:13px;
  letter-spacing:.04em;cursor:pointer;
}

/* ---------- rules with a word in them ---------- */
.midrule{display:flex;align-items:center;gap:14px;margin:18px 0;}
.midrule::before,.midrule::after{content:"";flex:1;border-top:1px solid var(--rule-soft);}
.midrule span{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.midrule-tight{margin:14px 0 10px;}
.midrule-tight::before,.midrule-tight::after{border-top:1px dashed var(--rule-soft);}

/* ---------- dev helper: deliberately off-palette so it never reads as the
     real way in ---------- */
button.btn-dev{
  border-color:var(--rule);background:transparent;color:var(--ink-2);font-size:12px;
}
button.btn-dev:hover{border-color:var(--blue);color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(12,35,64,.55);}
button.btn-dev:active{transform:translateY(0);box-shadow:none;}
.btn-dev svg{width:14px;height:14px;}
.btn-dev .badge{
  background:var(--plate-2);border:1px solid var(--rule-soft);border-radius:6px;
  padding:2px 7px;font-size:11px;letter-spacing:.06em;color:var(--ink-3);
}

/* Four more quick-login roles, below the admin one - a 2-column grid rather
   than four more full-width rows, since these are secondary to the admin
   button above them. */
.quick-login-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;
}
.quick-login-grid .btn-dev{
  font-size:11px;padding:9px 10px;justify-content:space-between;
}
.quick-login-grid .btn-dev .badge{font-size:9.5px;padding:2px 5px;}
@media (max-width:420px){
  .quick-login-grid{grid-template-columns:1fr;}
}

/* ---------- trust row ---------- */
.auth-trust{
  display:flex;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule-soft);
}
.auth-trust div{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.35;
}
.auth-trust div:not(:last-child){border-inline-end:1px solid var(--rule-soft);}
.auth-trust svg{width:17px;height:17px;color:var(--blue);}

/* ---------- footer ---------- */
.auth-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:34px;margin-top:34px;border-top:1px solid var(--rule);
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.auth-foot a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;}
.auth-foot a:hover{color:var(--ink);border-bottom-color:var(--blue);}

/* ---------- RTL: same reason as landing.css - Arabic is cursive and tracking
     breaks the joins ---------- */
[dir="rtl"] .auth-card-head h2,
[dir="rtl"] .auth-fact .n,
[dir="rtl"] .auth-fact .l,
[dir="rtl"] .midrule span,
[dir="rtl"] .auth-trust div,
[dir="rtl"] .forgot,
[dir="rtl"] .btn-dev,
[dir="rtl"] .auth-foot{letter-spacing:0;}
[dir="rtl"] .auth-trust div{text-transform:none;font-size:11px;}
[dir="rtl"] .midrule span{text-transform:none;font-size:11px;}

/* Sign-in error (wrong password, locked out, ...). landing.css has no danger
   token, so it is defined here once, in the same light/dark pattern. */
:root{--danger:#B42318;--danger-wash:rgba(180,35,24,.08);--danger-rule:rgba(180,35,24,.28);}
:root[data-theme="dark"]{--danger:#F97066;--danger-wash:rgba(249,112,102,.10);--danger-rule:rgba(249,112,102,.35);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#F97066;--danger-wash:rgba(249,112,102,.10);--danger-rule:rgba(249,112,102,.35);}}
.auth-alert{padding:10px 12px;border-radius:10px;border:1px solid var(--danger-rule);background:var(--danger-wash);color:var(--danger);font-size:.88rem;line-height:1.4;}