/* ═══════════════════════════════════════════════════════════════════════════
   HRMS — Careers portal auth pages.
   Design system lifted from New Intrasite V2/templates/login.html so the
   careers portal and the intranet read as one product: same navy brand panel
   with the project slideshow, same sky-blue accent, Plus Jakarta Sans, same
   field / button / alert components.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#0b1220;
  --navy-800:#0f172a;
  --brand:#0ea5e9;
  --brand-dark:#0284c7;
  --brand-soft:rgba(14,165,233,.12);
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#94a3b8;
  --line:#e2e8f0;
  --surface:#ffffff;
  --canvas:#f1f5f9;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --success:#059669;
  --success-bg:#ecfdf5;
  --warning:#b45309;
  --warning-bg:#fffbeb;
  --info:#0369a1;
  --info-bg:#f0f9ff;
  --radius:14px;
  --shadow-lg:0 24px 60px -20px rgba(15,23,42,.28), 0 8px 24px -12px rgba(15,23,42,.18);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

/* The `hidden` attribute only sets display:none at user-agent priority, so any
   class that declares its own display (.btn, .filechip, .drop, .toast …) would
   quietly ignore it and stay on screen. This makes hidden mean hidden. */
[hidden]{display:none !important;}

html,body{height:100%;}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{min-height:100%;display:grid;grid-template-columns:1.05fr .95fr;}
.shell--single{grid-template-columns:1fr;}

/* ═════════════════ BRAND PANEL — project slideshow ═════════════════ */
.brand{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:52px 60px;
  color:#e2e8f0;
  background:var(--navy-900);
}

.slides{position:absolute;inset:0;z-index:0;overflow:hidden;}
.slide{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 1.1s ease, transform 9s linear;
}
.slide.is-active{opacity:1;transform:scale(1.09);}

/* readability scrim — heaviest where the copy sits */
.slides__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(102deg,
      rgba(11,18,32,.95) 0%,
      rgba(11,18,32,.84) 36%,
      rgba(11,18,32,.50) 68%,
      rgba(11,18,32,.30) 100%),
    linear-gradient(to top, rgba(11,18,32,.80) 0%, rgba(11,18,32,0) 48%);
}

/* engineered blueprint grid — subtle, corporate */
.slides__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 100%);
}
.brand > *:not(.slides){position:relative;z-index:1;}

.brand__body{max-width:540px;margin:auto 0;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#7dd3fc;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(125,211,252,.24);
  padding:7px 14px;border-radius:999px;
  margin-bottom:24px;
}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.22);}

.brand__title{
  font-size:clamp(32px,3vw,44px);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;
  color:#f8fafc;
  text-shadow:0 2px 24px rgba(11,18,32,.6);
}
.brand__title em{font-style:normal;color:#38bdf8;}

.brand__history{
  margin-top:20px;padding-left:20px;
  border-left:2px solid rgba(56,189,248,.35);
  font-size:14px;line-height:1.8;color:#b6c4d6;
  max-width:52ch;
}
.brand__history strong{color:#e2e8f0;font-weight:600;}
.brand__history em{font-style:normal;color:#7dd3fc;font-weight:600;}

.stats{display:flex;gap:38px;flex-wrap:wrap;margin-top:30px;}
.stats div{display:flex;flex-direction:column;gap:2px;}
.stats strong{font-size:21px;font-weight:800;color:#f8fafc;letter-spacing:-.01em;}
.stats span{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#8fa0b6;}

/* slideshow caption + indicators */
.projects{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.18);
}
.projects__cap strong{
  display:block;font-size:14px;font-weight:700;color:#f8fafc;letter-spacing:.01em;
}
.projects__cap span{display:block;font-size:12px;color:#94a3b8;margin-top:3px;}
.dots{display:flex;gap:8px;flex-shrink:0;}
.dot{
  width:26px;height:3px;padding:0;border:none;border-radius:99px;
  background:rgba(226,232,240,.26);cursor:pointer;
  transition:background .25s ease, width .25s ease;
}
.dot:hover{background:rgba(226,232,240,.5);}
.dot.is-active{background:#38bdf8;width:34px;}
.dot:focus-visible{outline:2px solid #38bdf8;outline-offset:3px;}

/* ═════════════════ AUTH PANEL ═════════════════ */
.auth{
  display:flex;align-items:center;justify-content:center;
  padding:48px 40px;background:var(--surface);
}
.auth__inner{width:100%;max-width:404px;}

/* portal name — sits above the company mark */
.auth__portal{
  display:flex;align-items:center;gap:12px;
  font-size:17px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-dark);
  margin-bottom:18px;
}
.auth__portal::after{content:"";flex:1;height:1px;background:var(--line);}

.auth__logo{display:block;height:80px;width:auto;margin-bottom:26px;}
.auth__logo--text{
  font-size:20px;font-weight:800;letter-spacing:.18em;
  color:var(--brand-dark);margin-bottom:26px;display:none;
}

.auth__head{margin-bottom:24px;}
.auth__title{font-size:25px;font-weight:800;letter-spacing:-.015em;color:var(--ink);}
.auth__sub{margin-top:6px;font-size:13.5px;color:var(--ink-2);line-height:1.6;}

/* ═════════════════ ALERTS ═════════════════ */
.alerts{display:grid;gap:10px;margin-bottom:20px;}
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:10px;
  font-size:13.5px;font-weight:500;line-height:1.5;
  border:1px solid transparent;
}
.alert svg{flex:0 0 17px;margin-top:1px;}
.alert--danger {background:var(--danger-bg); color:var(--danger); border-color:#fecaca;}
.alert--success{background:var(--success-bg);color:var(--success);border-color:#a7f3d0;}
.alert--warning{background:var(--warning-bg);color:var(--warning);border-color:#fde68a;}
.alert--info   {background:var(--info-bg);   color:var(--info);   border-color:#bae6fd;}

/* ═════════════════ FIELDS ═════════════════ */
.field{margin-bottom:16px;}
.field__label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;font-weight:600;color:var(--ink);
  margin-bottom:7px;letter-spacing:.01em;
}
.field__label em{font-style:normal;font-weight:500;color:var(--ink-3);}
.field__wrap{position:relative;display:flex;align-items:center;}
.field__icon{position:absolute;left:14px;color:var(--ink-3);pointer-events:none;display:flex;transition:color .18s ease;}
.input{
  width:100%;height:48px;padding:0 14px 0 42px;
  font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder{color:#b6c2d2;font-weight:400;}
.input:hover{border-color:#cbd5e1;}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);}
.field__wrap:focus-within .field__icon{color:var(--brand);}
.input--pw{padding-right:46px;}

/* keep the browser's yellow autofill wash off the fields */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;
}

.toggle-pw{
  position:absolute;right:8px;width:32px;height:32px;
  display:grid;place-items:center;
  background:transparent;border:none;border-radius:7px;
  color:var(--ink-3);cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.toggle-pw:hover{color:var(--ink-2);background:var(--canvas);}
.toggle-pw:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

.link{
  font-size:12.5px;font-weight:600;color:var(--brand-dark);
  text-decoration:none;background:none;border:none;
  font-family:inherit;cursor:pointer;padding:0;
}
.link:hover{color:var(--brand);text-decoration:underline;}

.caps{
  display:none;align-items:center;gap:6px;
  margin-top:7px;font-size:12px;font-weight:500;color:var(--warning);
}
.caps.show{display:flex;}

/* password strength — register only */
.strength{display:none;align-items:center;gap:10px;margin-top:9px;}
.strength.show{display:flex;}
.strength__bar{flex:1;height:4px;background:var(--line);border-radius:99px;overflow:hidden;}
.strength__bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .22s ease, background .22s ease;}
.strength__bar i.is-weak  {background:var(--danger);}
.strength__bar i.is-fair  {background:#f59e0b;}
.strength__bar i.is-strong{background:var(--success);}
.strength__text{font-size:11.5px;font-weight:600;color:var(--ink-2);min-width:60px;}

/* consent checkbox */
.consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:4px 0 14px;
  font-size:12.5px;line-height:1.6;color:var(--ink-2);cursor:pointer;
}
.consent input{
  width:16px;height:16px;margin-top:1px;flex:none;
  accent-color:var(--brand);cursor:pointer;
}
.consent a{color:var(--brand-dark);font-weight:600;text-decoration:none;}
.consent a:hover{text-decoration:underline;}

/* ═════════════════ BUTTONS ═════════════════ */
.btn{
  width:100%;height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:8px;
  text-decoration:none;   /* anchors styled as buttons must not underline */
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dark) 100%);
  border:none;border-radius:10px;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(2,132,199,.9);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.05);box-shadow:0 14px 26px -12px rgba(2,132,199,.95);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px;}
.btn[disabled]{opacity:.72;cursor:progress;}
.btn .spinner{
  width:16px;height:16px;display:none;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
.btn.is-busy .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

.btn--ghost{
  background:#fff;color:var(--ink-2);
  border:1.5px solid var(--line);box-shadow:none;
  font-weight:600;height:44px;margin-top:10px;
}
.btn--ghost:hover{background:var(--canvas);color:var(--ink);filter:none;box-shadow:none;}
.btn--ghost .spinner{border-color:rgba(71,85,105,.3);border-top-color:var(--ink-2);}

/* Google — must stay recognisably Google, so it keeps a neutral white face */
.btn--google{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);box-shadow:none;
  font-weight:600;height:46px;margin-top:0;
}
.btn--google:hover{background:var(--canvas);filter:none;box-shadow:none;}
.btn--google svg{flex:none;}
.btn--google .spinner{border-color:rgba(71,85,105,.3);border-top-color:var(--ink-2);}

/* ═════════════════ DIVIDER ═════════════════ */
.divider{
  display:flex;align-items:center;gap:12px;
  margin:18px 0;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ═════════════════ FOOT ═════════════════ */
.auth__foot{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;font-size:13px;color:var(--ink-2);
}
.auth__foot a{color:var(--brand-dark);font-weight:700;text-decoration:none;}
.auth__foot a:hover{text-decoration:underline;}

.auth__legal{
  margin-top:16px;text-align:center;
  font-size:11.5px;line-height:1.6;color:var(--ink-3);
}
.auth__legal a{color:var(--ink-2);font-weight:600;text-decoration:none;}
.auth__legal a:hover{color:var(--brand-dark);text-decoration:underline;}

.panel[hidden]{display:none;}
.panel{animation:rise .32s cubic-bezier(.2,.7,.3,1);}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ═════════════════ COMPACT VARIANT ═════════════════
   The register form carries five fields plus a consent block — ~80px more
   than a laptop viewport allows. This trims the vertical rhythm just enough
   to fit without scrolling, and only on screens short enough to need it. */
@media (min-width:901px) and (max-height:1000px){
  .auth--compact{padding:34px 40px;}
  .auth--compact .auth__portal{margin-bottom:14px;}
  .auth--compact .auth__logo{height:64px;margin-bottom:18px;}
  .auth--compact .auth__head{margin-bottom:18px;}
  .auth--compact .field{margin-bottom:11px;}
  .auth--compact .input{height:46px;}
  .auth--compact .divider{margin:14px 0;}
  .auth--compact .btn--google{height:44px;}
  .auth--compact .consent{margin:2px 0 10px;}
  .auth--compact .auth__foot{margin-top:16px;padding-top:14px;}
}

/* ═════════════════ SIGNED-IN SHELL ═════════════════ */
.page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:48px 24px;}
.card{
  width:100%;max-width:600px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:36px 34px 30px;
}
.card__logo{display:block;height:44px;width:auto;margin-bottom:24px;}

.who{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
.who__avatar{
  width:58px;height:58px;flex:none;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-dark);
  font-size:23px;font-weight:800;
}
.who__name{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.who__mail{font-size:13.5px;color:var(--ink-2);margin-top:2px;}

.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.facts > div{background:#fff;padding:14px 16px;}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;}
.facts dd{margin:0;font-size:14px;font-weight:600;color:var(--ink);word-break:break-all;}

.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:99px;
  background:var(--success-bg);color:var(--success);border:1px solid #a7f3d0;
}
.tag--warn{background:var(--warning-bg);color:var(--warning);border-color:#fde68a;}

.err__code{font-size:72px;font-weight:800;letter-spacing:-.04em;color:var(--brand);line-height:1;}

/* ═════════════════ RESPONSIVE ═════════════════ */
@media (max-width:1080px){
  .brand{padding:44px 46px;}
  .auth{padding:44px 32px;}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  .brand{display:none;}
  .auth{align-items:flex-start;padding:36px 22px 48px;background:var(--canvas);}
  .auth__inner{
    max-width:440px;margin:0 auto;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-lg);
    padding:30px 26px 28px;
  }
  .auth__logo{height:68px;margin:0 auto 24px;}
  .card{padding:28px 24px 24px;}
}
@media (max-width:400px){
  .auth__inner{padding:26px 20px 24px;}
  .auth__title{font-size:23px;}
}

/* short laptop viewports */
@media (min-width:901px) and (max-height:820px){
  .brand{padding:40px 50px;}
  .eyebrow{margin-bottom:18px;}
  .brand__title{font-size:31px;}
  .brand__history{margin-top:16px;font-size:13.2px;line-height:1.7;}
  .stats{margin-top:22px;}
  .stats strong{font-size:19px;}
}
@media (min-width:901px) and (max-height:680px){
  .brand__history{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .slide.is-active{transform:none;}
}