/* =====================================================================
   THE SIGN-IN PAGE - the approved FengeAssist design.

   Colours from the design's design-tokens.css. Buttons, fields and tabs
   are HTML and CSS, not images (per the design README). Scoped to
   `.fa-auth` so nothing here reaches the signed-in pages.
   ===================================================================== */

:root {
  --fenge-navy:#0b2855; --fenge-purple:#7730fa; --fenge-blue:#098bf4;
  --fenge-green:#0bbf94; --fenge-orange:#ffb021; --fenge-text:#10254b;
  --fenge-muted:#5c7193; --fenge-border:#d6e3f4; --fenge-field:#f3f8ff;
  --fenge-radius:14px;
  --fenge-button-gradient:linear-gradient(100deg,#8737ff,#6725f4);
}

.fa-auth{position:fixed;inset:0;overflow:auto;
  background:linear-gradient(160deg,#e3eefa 0%,#d4e5f7 100%);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--fenge-text);
  display:flex;align-items:center;justify-content:center;padding:32px 16px}
.fa-auth[hidden]{display:none}
.fa-auth *{box-sizing:border-box}

.fa-card{display:grid;grid-template-columns:1.42fr 1fr;width:100%;max-width:1380px;
  height:866px;background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 70px rgba(11,40,85,.16)}

/* ------------------------------ LEFT -------------------------------- */

.fa-left{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:40px 48px 0;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0d2a5e 0%,#14408a 40%,#1d56a2 100%)}
/* The background photo, sized to the panel's width and sitting on its
   bottom edge, so the truck is the size the design has it. The sky above
   the photo's top is the panel's own gradient; the photo fades into it. */
.fa-photo{position:absolute;left:0;bottom:0;width:100%;max-width:none;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 12%)}

/* Navy behind the words on the left, the top, and the bottom strip. */
.fa-left::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 68% 40% at 20% 20%,rgba(12,38,86,.85) 0%,rgba(12,38,86,.55) 50%,rgba(12,38,86,0) 100%),
    linear-gradient(0deg,rgba(10,32,72,.5) 0%,rgba(10,32,72,.15) 10%,rgba(10,32,72,0) 15%)}
/* The two overlays have solid backgrounds (design README), so they are
   feathered into the sky rather than laid on as cut-outs. */
.fa-map{position:absolute;top:5%;right:-6%;width:72%;z-index:2;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 58% 56% at 52% 50%,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse 58% 56% at 52% 50%,#000 60%,transparent 100%)}
.fa-track{position:absolute;top:15%;right:4%;width:42%;z-index:2;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 62%,transparent 100%)}
.fa-left>*:not(.fa-map):not(.fa-track):not(.fa-photo){position:relative;z-index:3}

.fa-brand{display:flex;align-items:center;gap:22px}
.fa-brand img{width:110px;height:110px;border-radius:24px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.fa-word{font-weight:700;font-size:58px;letter-spacing:-.03em;line-height:1}
.fa-word b{font-weight:700;background:linear-gradient(100deg,#a463ff,#7730fa);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fa-tag{font-size:15px;letter-spacing:.42em;margin-top:12px;font-weight:500}

.fa-left h1{font-size:40px;line-height:1.2;font-weight:600;margin:36px 0 16px;max-width:470px}
.fa-lead{font-size:18px;line-height:1.5;font-weight:300;opacity:.92;max-width:440px;margin:0 0 22px}

.fa-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fa-feats li{display:flex;align-items:center;gap:16px}
.fa-dot{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25)}
.fa-dot svg{width:28px;height:28px;color:#fff}
.fa-dot.p{background:linear-gradient(140deg,#a463ff,#7730fa)}
.fa-dot.b{background:linear-gradient(140deg,#35a8ff,#098bf4)}
.fa-dot.g{background:linear-gradient(140deg,#2fd9ae,#0bbf94)}
.fa-dot.o{background:linear-gradient(140deg,#ffc552,#ffb021)}
.fa-feats div strong{display:block;font-size:17px;font-weight:600}
.fa-feats div span{display:block;font-size:13.5px;font-weight:300;opacity:.9;margin-top:3px}

/* Spread from the left margin to the truck's right edge, which sits at
   93.1% of the panel (photo full width, truck ends 93.1% into it).
   100% here is the panel less its 48px side padding. */
.fa-strip{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:26px 0 30px;
  width:calc((100% + 96px) * .931 - 48px)}
.fa-strip div{display:flex;align-items:center;gap:14px;padding:0 26px;
  border-left:1px solid rgba(255,255,255,.35)}
.fa-strip div:first-child{padding-left:0;border-left:0}
.fa-strip div:last-child{padding-right:0}
.fa-strip svg{width:34px;height:34px;flex:none}
.fa-strip strong{display:block;font-size:15px;font-weight:600}
.fa-strip span{display:block;font-size:13px;font-weight:300;opacity:.9}

/* ------------------------------ RIGHT ------------------------------- */

.fa-right{padding:34px 56px 40px;display:flex;flex-direction:column;justify-content:flex-start}
.fa-mark{text-align:center}
.fa-mark img{width:92px;height:92px;border-radius:21px}
.fa-mark .fa-word{font-size:30px;color:var(--fenge-navy);margin-top:8px}
.fa-mark .fa-tag{font-size:10.5px;letter-spacing:.38em;margin-top:6px;color:var(--fenge-navy)}

.fa-right h2{text-align:center;font-size:42px;font-weight:700;color:var(--fenge-navy);
  margin:26px 0 6px;letter-spacing:-.01em}
.fa-sub{text-align:center;color:var(--fenge-muted);font-size:17px;font-weight:300;margin:0 0 26px}
.fa-sub:empty{display:none}

.fa-tabs[hidden]{display:none}
.fa-tabs{display:flex;border:1px solid var(--fenge-border);border-radius:8px;overflow:hidden;margin-bottom:22px}
.fa-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  height:52px;cursor:pointer;user-select:none;font-size:16px;font-weight:500;color:var(--fenge-muted);background:#fff;
  transition:background .2s,color .2s}
.fa-tab svg{width:20px;height:20px}
.fa-tab.on{background:var(--fenge-button-gradient);color:#fff}
.fa-tab:not(.on):hover{background:#f3edff;color:var(--fenge-purple)}

/* Messages take the subtitle's place, so the card never changes height. */
.fa-auth .banner{display:none;text-align:center;font-size:17px;font-weight:300;margin:0 0 26px;
  padding:0;background:none;border:0;border-radius:0;line-height:1.4}
.fa-auth .banner.warn{display:block;color:var(--fenge-muted);background:none;border:0}
.fa-auth .banner.bad{display:block;color:#c62828;background:none;border:0}
.fa-sub:has(+ .banner.warn),.fa-sub:has(+ .banner.bad){display:none}
/* Create account has four fields; a little tighter so it fits the same card. */
#regForm .fa-field{margin-bottom:10px}
#regForm .fa-input input{height:52px}

.fa-auth form[hidden]{display:none}
.fa-field{margin-bottom:18px}
.fa-field label{display:block;font-size:16px;font-weight:600;color:var(--fenge-navy);margin-bottom:9px}
.fa-input{position:relative}
.fa-input>svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;color:var(--fenge-muted);pointer-events:none}
.fa-input input{width:100%;height:56px;border:1px solid var(--fenge-border);border-radius:10px;
  background:var(--fenge-field);padding:0 52px 0 56px;font:inherit;font-size:16px;color:var(--fenge-text);outline:none}
/* A browser filling in a saved login repaints the field in its own blue;
   keep the design's field colour and text instead. */
.fa-input input:-webkit-autofill,.fa-input input:-webkit-autofill:hover,.fa-input input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--fenge-field) inset;-webkit-text-fill-color:var(--fenge-text);
  caret-color:var(--fenge-text);transition:background-color 9999s}
.fa-input input:focus{border-color:var(--fenge-purple);box-shadow:0 0 0 3px rgba(119,48,250,.15)}
.fa-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:none;padding:6px;cursor:pointer;color:var(--fenge-muted)}
.fa-eye svg{width:24px;height:24px}

.fa-row{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 22px}
.fa-check{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;color:var(--fenge-text)}
.fa-check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:5px;
  border:1.5px solid var(--fenge-border);background:#fff;cursor:pointer;display:grid;place-items:center}
.fa-check input:checked{background:var(--fenge-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L19 7'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:var(--fenge-purple)}
.fa-or{display:flex;align-items:center;gap:18px;margin:26px 0 22px;color:var(--fenge-muted);font-size:15px}
.fa-or::before,.fa-or::after{content:'';flex:1;height:1px;background:var(--fenge-border)}
.fa-social{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fa-sso{height:56px;border:1px solid var(--fenge-border);border-radius:8px;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:14.5px;color:var(--fenge-muted)}
.fa-sso svg{width:22px;height:22px;flex:none}
.fa-sso:hover{background:var(--fenge-field)}
.fa-auth a{color:var(--fenge-purple);text-decoration:none;font-size:16px}
.fa-auth a:hover{text-decoration:underline}
.fa-center{text-align:center;margin-top:18px}

.fa-btn{width:100%;height:58px;border:0;border-radius:10px;background:var(--fenge-button-gradient);
  color:#fff;font:inherit;font-size:19px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 10px 22px rgba(119,48,250,.28)}
.fa-btn svg{width:22px;height:22px}
.fa-btn:hover{filter:brightness(1.06)}
.fa-btn[disabled]{opacity:.6;cursor:default}

.fa-input input::placeholder{color:#8a9bb7}

/* ---------------------- CREATE YOUR ACCOUNT ------------------------- */
/* Sizes measured from the Create account mockup, scaled to this card. */
.fa-right[data-view="new"]{padding-top:22px;padding-bottom:20px}
.fa-right[data-view="new"] .fa-mark img{width:74px;height:74px;border-radius:17px}
.fa-right[data-view="new"] .fa-mark .fa-word{font-size:28px;margin-top:4px}
.fa-right[data-view="new"] .fa-mark .fa-tag{font-size:10px;margin-top:4px}
.fa-right[data-view="new"] h2{font-size:30px;margin:12px 0 4px}
.fa-right[data-view="new"] .fa-sub{font-size:15px;margin-bottom:16px}
.fa-right[data-view="new"] .fa-tabs{margin-bottom:15px}
.fa-right[data-view="new"] .fa-tab{height:49px;font-size:15px}
#regForm .fa-field{margin-bottom:10px}
#regForm .fa-field label{font-size:15px;margin-bottom:6px}
#regForm .fa-input input{height:48px;font-size:15px}
.fa-agree{font-size:13.5px;margin:6px 0 12px}
.fa-agree input{width:20px;height:20px;flex:none}
.fa-agree a{font-size:13.5px}
#regForm .fa-btn{height:48px;font-size:17px}
#regForm .fa-or{margin:16px 0 12px}
#regForm .fa-sso{height:52px}

/* ---------------------- RESET YOUR PASSWORD ------------------------- */
/* Sizes measured from the Reset your password mockup, scaled to this card. */
.fa-right[data-view="forgot"]{padding-top:22px}
.fa-right[data-view="forgot"] .fa-mark img{width:78px;height:78px;border-radius:18px}
.fa-right[data-view="forgot"] .fa-mark .fa-word{font-size:29px;margin-top:4px}
.fa-right[data-view="forgot"] .fa-mark .fa-tag{font-size:10px;margin-top:4px}
.fa-right[data-view="forgot"] h2{font-size:31px;margin:20px 0 8px}
.fa-right[data-view="forgot"] .fa-sub{font-size:16px;line-height:1.45;max-width:420px;margin:0 auto}
/* The picture's own pale square is faded out, leaving its circle. */
.fa-illus{display:block;width:250px;height:250px;margin:14px auto 10px;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 71%);
          mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 71%)}
.fa-back{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.fa-back svg{width:20px;height:20px}
#forgotForm .fa-btn{margin-top:4px}
#forgotForm .fa-or{margin:30px 0 22px}
#forgotForm .fa-center{margin-top:0}

/* ------------------------------ NARROW ------------------------------ */

@media (max-width:1100px){
  .fa-card{grid-template-columns:1fr;max-width:560px;height:auto}
  .fa-left{display:none}
}
@media (max-width:520px){
  .fa-social{grid-template-columns:1fr}
  .fa-auth{padding:0;align-items:stretch}
  .fa-card{border-radius:0;box-shadow:none}
  .fa-right{padding:28px 18px}
  .fa-right h2{font-size:32px}
}