/* ============================================================================
   KJLogin — /login  (Batch 1 "Job Seeker", artboard KJLogin)

   Every number below was measured in the rendered artboard at 1512 (not read
   off a token sheet):
     page      bg #F6F8FB, padding 32px 32px 80px, starts under the 73px header
     grid      max-width 1200, 576px + 48 gap + 576px, align-items:center,
               min-height: max(640px, calc(100vh - 168px))
     card      460 x auto, r28, 1px #E2E7EF,
               shadow 0 30px 80px -30px rgba(4,30,66,.35) + --kj-shadow-md,
               padding 28px 28px 26px  -> inner column 402
     tabs      402x48 track r999 #EEF1F6 pad 3; tab 196.5x42, 14/800
     h1        44/800 lh 47.52 ls -1.32px (-.03em) #041E42 Plus Jakarta Sans
     card h2   24/800 lh 28.8 ls -.48px #041E42
     input     402x48 r12 1.5px #CBD3E0 pad 0 16, 15px, #041E42
     submit    402x56 r999 gradient, 17/700 ls .01em, --kj-shadow-accent
     badge     h32 r999 #fff 1px #E2E7EF --kj-b3-shadow-xs, 13/700 ls .02em
     stats     border-top 1px #E2E7EF, pad-top 24, margin-top 32, gap 36;
               value 26/800 ls -.02em lh 1, label 13px #6B7890 mt 6
     mark      260x370 at left -36 / top -40, opacity .1

   Responsive rules are the artboard's own (@1023 / @767), reproduced verbatim.

   FONT: the bundle pairs Mulish (body) + Plus Jakarta Sans (display). Mulish
   is self-hosted since 2026-09-11 (tokens.css) and applies here via the
   scoped body:has(.kj-nav-wrap--pub) rule in base.css, inherited through
   headerArea_new.php's public header; display text keeps var(--kj-font).
   ============================================================================ */

/* The generic page-glow element this template used to paint is replaced by the
   artboard's own two-circle glow inside .kj-login__glow. */
.kj-bg { display: none; }

/* ---------------------------------------------------------------- page ---- */
.kj-login {
  position: relative;
  background: var(--kj-b3-page);
  padding: 32px 32px 80px;
}

/* Hero glow: two 820px radial circles, masked out by 78% of a 900px band that
   starts 72px above the section so it sits behind the translucent header. */
.kj-login__glow {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
}
.kj-login__glow span {
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  display: block;
}
.kj-login__glow span:first-child {
  top: -300px;
  left: -320px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 115, .30) 0%, rgba(254, 97, 108, .15) 52%, rgba(254, 97, 108, 0) 72%);
}
.kj-login__glow span:last-child {
  top: -160px;
  right: -300px;
  background: radial-gradient(circle at 50% 50%, rgba(254, 97, 108, .20) 0%, rgba(255, 196, 115, .13) 52%, rgba(255, 196, 115, 0) 72%);
}

.kj-login__grid {
  position: relative;
  max-width: var(--kj-b1-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  min-height: max(640px, calc(100vh - 168px));
}

/* -------------------------------------------------------------- story ----- */
.kj-login__story {
  position: relative;
  padding: 24px 0;
  min-width: 0;
}
.kj-login__mark {
  position: absolute;
  left: -36px;
  top: -40px;
  width: 260px;
  height: 370px;
  opacity: .1;
  pointer-events: none;
}
.kj-login__story-in { position: relative; }

.kj-login__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke);
  box-shadow: var(--kj-b3-shadow-xs);
  color: var(--kj-b3-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--kj-ls-wide);
}
.kj-login__badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kj-gold-400);
  flex: none;
}

.kj-login__h1 {
  margin: 26px 0 14px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: var(--kj-fs-display-lg);      /* 44px */
  line-height: var(--kj-lh-tight);          /* 1.08 -> 47.52px */
  letter-spacing: var(--kj-ls-tighter);     /* -.03em */
  color: var(--kj-b3-title);
  text-wrap: balance;
}
/* The headline is the animated one since 2026-10-05 (kj-hero-title.php, set 'login'): "Lëre
   <word>" with the word swapping, over "të të gjejë ty." which never changes. The coral stays
   on the promise — <em> in the h1's own text (laid out on the same two lines, so nothing jumps
   when the script takes over) and the fixed second line; the swapping word stays navy. */
.kj-login__h1 .kj-hero__still em, .kj-login__h1 .kj-hero__after { color: var(--kj-coral-600); font-style: normal; }
/* only the h1's OWN text: the script measures its phrases with an <em> inside this h1, and a
   block there would measure the word alone — the line would never be shrunk to fit */
.kj-login__h1 .kj-hero__still em { display: block; }
.kj-login__h1 .kj-hero__rot em { color: inherit; }
.kj-login__h1.is-rot .kj-hero__rot { height: 1.08em; line-height: 1.08; }

.kj-login__lede {
  margin: 0;
  max-width: 460px;
  font-size: var(--kj-fs-body-lg);          /* 17px */
  line-height: 1.6;
  color: var(--kj-b3-body);
  text-wrap: pretty;
}

.kj-login__benefits {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kj-login__benefits li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.kj-login__tick {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kj-b3-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kj-login__benefit {
  font-size: var(--kj-fs-body-sm);          /* 15px */
  line-height: 1.45;
  color: var(--kj-b3-body);
}
.kj-login__benefit strong {
  display: block;
  color: var(--kj-b3-title);
  font-weight: 800;
  font-size: var(--kj-fs-body);             /* 16px */
}

.kj-login__stats {
  position: relative;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--kj-b3-stroke);
  margin-top: 32px;
}
.kj-login__stat-v {
  display: block;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--kj-b3-title);
}
.kj-login__stat-l {
  display: block;
  font-size: var(--kj-fs-caption);          /* 13px */
  color: var(--kj-b3-muted);
  margin-top: 6px;
}

/* --------------------------------------------------------------- card ----- */
.kj-login__form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.kj-login__card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke);
  border-radius: var(--kj-b1-r-xl);         /* 28px */
  box-shadow: 0 30px 80px -30px rgba(4, 30, 66, .35), var(--kj-shadow-md);
  padding: 28px 28px 26px;
  animation: kjLoginUp .6s .12s var(--kj-ease-out) both;
}
@keyframes kjLoginUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-login__card { animation: none; }
}

.kj-login__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--kj-b3-sunken);
  border-radius: 999px;
  margin-bottom: 24px;
}
.kj-login__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--kj-b3-muted);
  transition: all var(--kj-dur-slow, .25s);
}
.kj-login__tab.is-active {
  background: #fff;
  color: var(--kj-coral-600);
  box-shadow: var(--kj-shadow-sm);
  cursor: default;
}
.kj-login__tab:not(.is-active):hover { color: var(--kj-b3-title); }

.kj-login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kj-login__head { display: block; }
.kj-login__title {
  margin: 0 0 4px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kj-b3-title);
}
.kj-login__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--kj-b3-muted);
}

/* -------------------------------------------------------------- fields ---- */
.kj-login__field,
.inputField.kj-login__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.kj-login__label,
.inputFieldHeader.kj-login__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kj-b3-title);
  line-height: 1.3;
}
.kj-login .inputFields {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--kj-b3-stroke-2);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--kj-b3-title);
  box-sizing: border-box;
  transition: border-color var(--kj-dur-base), box-shadow var(--kj-dur-base);
  -webkit-appearance: none;
          appearance: none;
}
.kj-login .inputFields::placeholder { color: var(--kj-b3-faint); }
.kj-login .inputFields:focus {
  outline: none;
  border-color: var(--kj-coral-400);
  box-shadow: var(--kj-ring);
}
/* Per-field invalid state. The artboard draws no per-field error, so this is the
   ring formula applied to the danger hue — colour is never the only signal
   because the shared #comErr message renders above the fields as well. */
.kj-login .inputFields.form-fieldErr {
  border-color: var(--kj-b3-danger);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .25);
}

.kj-login__pass-wrap { position: relative; }
.kj-login__pass-wrap .inputFields { padding-right: 48px; }
.kj-login .makePassReadable {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--kj-b3-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--kj-dur-base), color var(--kj-dur-base);
}
.kj-login .makePassReadable:hover,
.kj-login .makePassReadable:focus-visible {
  background: var(--kj-b3-page);
  color: var(--kj-b3-title);
}
.kj-login .kj-eye-off { display: none; }
.kj-login .makePassReadableActive .kj-eye-on { display: none; }
.kj-login .makePassReadableActive .kj-eye-off { display: block; }

/* remember + forgot share one row (artboard) */
.kj-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kj-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.kj-login__remember input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--kj-coral-500);
  flex: none;
  cursor: pointer;
}
.kj-login__remember label {
  font-size: 14px;
  color: var(--kj-b3-body);
  cursor: pointer;
  margin: 0;
}
.kj-login__forgot-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--kj-coral-600);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.kj-login__forgot-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- alerts --- */
/* KJLogin f.error / f.info: flex, gap 8, pad 10 14, r12, 600/14, kjFadeUp .25s;
   they sit between the remember row and the button */
.kj-login__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  animation: kjFadeUp .25s both;
}
.kj-login__alert[hidden] { display: none; }
.kj-login__alert svg { flex: none; }
.kj-login__alert--bad { background: var(--kj-b3-danger-bg); color: #B4282C; }
.kj-login__alert--ok  { background: var(--kj-b3-success-bg); color: #0F7A50; }
.kj-login__forgot-link.is-busy { opacity: .6; pointer-events: none; }

/* ----------------------------------------------------- "ose" + social ----- */
.kj-login__or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--kj-b3-faint);
  font-size: 13px;
}
.kj-login__or span { flex: 1; height: 1px; background: var(--kj-b3-stroke); }
.kj-login__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kj-login__socialbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--kj-b3-stroke-2);
  background: #fff;
  color: var(--kj-b3-title);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.kj-login__socialbtn:hover { background: var(--kj-b3-page); }

/* Root toast (bottom-centre navy pill), same as the share toast */
.kj-login__toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 170;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--kj-b3-navy, #041E42);
  color: #fff;
  font-family: var(--kj-font);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18));
  animation: kjLoginToast .25s var(--kj-ease-out) both;
}
.kj-login__toast[hidden] { display: none; }
@keyframes kjLoginToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* reCAPTCHA — rendered only after 3 failed attempts (login.php). */
.kj-login__captcha { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kj-login__captcha .inputFieldHeaderHide { display: none; }
.kj-login__captcha .liner { display: none; }
.kj-login .inputFieldBeforeBtnW0 {
  display: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--kj-b3-danger-bg);
  color: #B4282C;
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------- submit --- */
.kj-login__submit-wrap { margin: 0; }
.kj-login .signInBtn {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--kj-b3-gradient);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--kj-shadow-accent);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: transform var(--kj-dur-fast) var(--kj-ease-out), box-shadow var(--kj-dur-base);
}
.kj-login .signInBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55);
}
.kj-login .signInBtn:active { transform: none; }

/* ----------------------------------------------------------------- foot --- */
.kj-login__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--kj-b3-stroke);
  font-size: 14px;
  color: var(--kj-b3-muted);
}
.kj-login__emp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--kj-b3-title);
  text-decoration: none;
}
.kj-login__emp:hover { color: var(--kj-coral-600); }

/* ============================ responsive (artboard @1023 / @767) =========== */
@media (max-width: 1023px) {
  .kj-login { padding: 28px 24px 48px; }
  .kj-login__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 28px;
    justify-items: center;
  }
  .kj-login__story {
    padding: 0;
    max-width: 560px;
    text-align: center;
  }
  .kj-login__lede { margin-left: auto; margin-right: auto; }
  .kj-login__h1.is-rot .kj-hero__rot { justify-content: center; }
  .kj-login__benefits { display: none; }
  .kj-login__mark {
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    width: 200px;
    height: 285px;
    opacity: .07;
  }
  .kj-login__stats { justify-content: center; }
  .kj-login__form-col { width: 100%; }
  .kj-login__card { max-width: 520px; }
}

@media (max-width: 767px) {
  .kj-login { padding: 20px 16px 40px; }
  .kj-login__stats { display: none; }
  .kj-login__card { padding: 22px 18px 20px; border-radius: 22px; }
  .kj-login__tab { font-size: 13px; }
  .kj-login__row { gap: 8px; }
}
/* the design's shared headline (KJLogin.html:25 under root.x-dc.txt:179 [data-h1], as home.css:723): 28 px on phones — it
   was 34 at <= 767; 760-767 now keep the 44 px of the desktop, the house breakpoint of the home's headline (2026-10-18) */
@media (max-width: 759px) {
  .kj-login__h1 { font-size: 28px; }
}