/* ═══════════════════════════════════════════════════════════
   BRAVOS — AUTH (log in / register)
   Loaded via extra_css, so responsive.css still lands last.

   The login page used to carry its own design language — #EEEEF2
   ground, black pill button, borderless underline inputs and an
   animated cartoon SVG — which shared nothing with the rest of the
   site. This rebuilds it on the same tokens as everything else.
   ═══════════════════════════════════════════════════════════ */

.au-wrap{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  display:grid; grid-template-columns:1.05fr 1fr;
}

/* ── Brand panel ── */
.au-brand{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 60px;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(37,99,235,.34) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 85% 100%, rgba(96,165,250,.20) 0%, transparent 62%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 55%, #0d1f4d 100%);
}
.au-brand::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 40% 45%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 40% 45%, #000 30%, transparent 78%);
  pointer-events:none;
}
.au-brand-inner{ position:relative; z-index:1; max-width:440px; }
.au-brand h2{
  font-size:clamp(1.7rem,2.6vw,2.3rem); color:#fff;
  letter-spacing:-.025em; line-height:1.2; margin-bottom:14px; text-wrap:balance;
}
.au-brand p{ font-size:.98rem; color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:34px; }

.au-points{ display:flex; flex-direction:column; gap:18px; }
.au-point{ display:flex; align-items:flex-start; gap:13px; }
.au-point-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:rgba(255,255,255,.12); color:#fff;
}
.au-point-ic svg{ width:17px; height:17px; }
.au-point b{ display:block; font-size:.92rem; color:#fff; margin-bottom:2px; }
.au-point span{ font-size:.84rem; color:rgba(255,255,255,.62); line-height:1.5; }

/* ── Form panel ── */
.au-form-col{
  display:flex; align-items:center; justify-content:center;
  padding:56px 48px; background:#fff;
}
.au-form{ width:100%; max-width:392px; }
.au-head{ margin-bottom:30px; }
.au-head h1{ font-size:1.85rem; letter-spacing:-.02em; margin-bottom:7px; }
.au-head p{ font-size:.9rem; color:var(--gray-500); }

/* Inline alert. The corner toast is switched off on these pages via the
   flash block in base.html — with both on, one failed login printed the
   same error twice. */
.au-alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; margin-bottom:22px;
  border-radius:12px; font-size:.87rem; font-weight:500;
  border-left:3px solid;
}
.au-alert svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.au-alert-error  { background:#fef2f2; color:#991b1b; border-color:var(--error); }
.au-alert-success{ background:#f0fdf4; color:#166534; border-color:var(--success); }
.au-alert-info   { background:#eff6ff; color:#1e40af; border-color:var(--accent); }

.au-field{ margin-bottom:18px; }
.au-label{
  display:block; font-size:.82rem; font-weight:600;
  color:var(--gray-700); margin-bottom:7px;
}
.au-input-wrap{ position:relative; }
.au-input{
  width:100%; padding:13px 15px;
  font-size:.94rem; font-family:var(--font); color:var(--gray-900);
  background:#fff; border:1.5px solid var(--gray-200); border-radius:11px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.au-input::placeholder{ color:var(--gray-400); }
.au-input:hover{ border-color:var(--gray-300); }
.au-input:focus{ outline:none; border-color:var(--navy-light); box-shadow:var(--ring); }
.au-input.has-toggle{ padding-right:46px; }

.au-pw-toggle{
  /* z-index:2 is load-bearing. ui2.css gives any :focus-visible element
     `position:relative; z-index:1` so its focus ring isn't clipped — which
     means a focused input outranks this absolutely-positioned button (z-index
     auto) and paints straight over it. The eye vanished on reveal and the
     input then ate the click, so you could show the password but never hide
     it again. */
  position:absolute; z-index:2; right:6px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  color:var(--gray-400); background:none; border:none; cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.au-pw-toggle:hover{ color:var(--navy); background:var(--gray-100); }
.au-pw-toggle svg{ width:17px; height:17px; display:block; }

/* Both eyes are in the DOM; exactly one is shown. */
.au-pw-toggle .au-eye-hide{ display:none; }
.au-pw-toggle.is-revealed .au-eye-show{ display:none; }
.au-pw-toggle.is-revealed .au-eye-hide{ display:block; }
.au-pw-toggle.is-revealed{ color:var(--navy-light); }

/* The navbar is fixed, so a field the browser scrolls to can land beneath
   it — taking this button with it, at which point the navbar swallows the
   click. Keep focused fields clear of it. */
.au-field, .au-input{ scroll-margin-top:calc(var(--nav-h) + 24px); }

.au-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:20px 0 24px; font-size:.85rem;
}
.au-remember{ display:flex; align-items:center; gap:8px; color:var(--gray-600); cursor:pointer; }
.au-remember input{ accent-color:var(--navy-light); width:15px; height:15px; }
.au-forgot{ color:var(--navy-light); font-weight:600; }
.au-forgot:hover{ color:var(--accent); }

.au-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:14px 24px; border-radius:12px;
  font-size:.95rem; font-weight:700; font-family:inherit;
  color:#fff; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  box-shadow:0 8px 22px rgba(37,99,235,.32);
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease),
             background var(--t-fast) var(--ease),
             gap var(--t-mid) var(--ease-out);
}
.au-btn svg{ width:15px; height:15px; }
.au-btn::after{
  content:'';
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease-out);
  pointer-events:none;
}
.au-btn:hover::after{ left:120%; }
.au-btn:hover{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
  transform:translateY(-2px); gap:12px;
  box-shadow:0 14px 32px rgba(37,99,235,.44);
}
.au-btn:active{ transform:translateY(0); }

.au-alt{
  margin-top:24px; text-align:center;
  font-size:.88rem; color:var(--gray-500);
}
.au-alt a{ color:var(--navy-light); font-weight:700; }
.au-alt a:hover{ color:var(--accent); }

.au-hint{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--gray-100);
  font-size:.8rem; color:var(--gray-400); line-height:1.6;
}

/* ── Responsive ── */
@media (max-width:900px){
  .au-wrap{ grid-template-columns:1fr; }
  /* The brand panel becomes a header strip rather than a full column. */
  .au-brand{ padding:40px 28px; }
  .au-brand-inner{ max-width:none; }
  .au-points{ display:none; }
  .au-brand p{ margin-bottom:0; }
  .au-form-col{ padding:40px 24px 56px; }
}
@media (max-width:480px){
  .au-brand{ padding:32px 20px; }
  .au-form-col{ padding:32px 18px 48px; }
  .au-head h1{ font-size:1.55rem; }
}
@media (hover:none){
  .au-btn:hover{ transform:none; gap:9px; }
  .au-btn:hover::after{ left:-60%; }
}

/* ── Hiring-portal links on the seeker login ─────────────────
   The three recruiter logins were reachable only from each other and from
   the "post a job" page, so an employer had no way to find their own door. */
.au-portals{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--gray-100);
}
.au-portals-lead{ font-size:.8rem; color:var(--gray-500); margin-bottom:9px; }
.au-portals-row{ display:flex; flex-wrap:wrap; gap:8px; }
.au-portals-row a{
  padding:7px 13px; border-radius:100px;
  border:1.5px solid var(--gray-200);
  font-size:.79rem; font-weight:700; color:var(--gray-700);
  transition:border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.au-portals-row a:hover{
  border-color:var(--navy-light); color:var(--navy);
  background:rgba(37,99,235,.06);
}