/* FlyHire Command — Sign In
   Shares the product's color tokens/fonts with app.css but is fully
   self-contained so this page never depends on the SPA shell loading. */
:root{
  --bg:#050F1D;
  --surface:#071729;
  --panel:#0A1B2E;
  --panel-2:#0F2238;
  --panel-hover:#152B45;
  --border:#17304A;
  --border-soft:#102338;

  --text:#EAEDF5;
  --text-dim:#ADB9D1;
  --text-faint:#8291AC;

  --accent:#1361FF;
  --accent-2:#5B9BFF;
  --accent-dark:#0B45C4;
  --accent-soft:rgba(19,97,255,.16);
  --accent-line:rgba(19,97,255,.4);

  --good:#17D9A6;
  --good-soft:rgba(23,217,166,.14);
  --bad:#F0594E;
  --bad-soft:rgba(240,89,78,.14);
  --gold:#E0A83E;

  /* Same small-end type scale as the app, so the phone floor is one change
     rather than a hunt through the file. */
  --fs-xs:10px;
  --fs-sm:11px;

  --radius:12px;
  --radius-lg:20px;
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.7);
}
/* The form side follows the theme the person chose in the app. The brand
   side does NOT: it is white text over a photograph, and inverting it would
   put white on white. Same reasoning as the app's own photo cards. */
/* The brand panel keeps the dark palette whatever the theme is: it is white
   text over a photograph, and the light tokens turned its accents into dark
   ink on a dark image. */
:root[data-theme="light"] .login-brand{
  --accent-soft:rgba(19,97,255,.16);
  --accent-line:rgba(19,97,255,.4);
  --text-faint:#8291AC;
}

:root[data-theme="light"]{
  --bg:#F3F5FA; --surface:#FFFFFF; --panel:#FFFFFF; --panel-2:#F1F4F9; --panel-hover:#E7ECF4;
  --border:#DCE3EE; --border-soft:#E7ECF4;
  --text:#151B27; --text-dim:#3A4454; --text-faint:#545D71;
  --accent-2:#2563D6; --accent-soft:rgba(19,97,255,.10); --accent-line:rgba(19,97,255,.32);
  --good:#0C8565; --bad:#D53A2F; --gold:#9F6A0F;
  --shadow-lg:0 30px 70px -30px rgba(20,30,55,.22);
}

@media (max-width:780px){
  /* Nothing below 12px on a phone, same floor as the app. */
  :root{ --fs-xs:12px; --fs-sm:12px; }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Sora',sans-serif;margin:0;}
a{color:var(--accent-2);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}

/* Two-thirds / one-third split: the brand + product session owns 2/3 of the
   screen, the sign-in form the remaining 1/3. The form column carries a real
   min width so the card can never be squeezed unusably narrow on smaller
   laptops (below ~1140px the brand simply gives back a few percent), and
   under 920px the brand panel drops out entirely for phones. */
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(384px,1fr);
}
@media (max-width:920px){
  .login-shell{grid-template-columns:1fr;}
  /* the brand panel's own display:none for phones lives at the very end of
     this file — see the note there. */
}

/* ---------- left: brand / hero panel ---------- */
.login-brand{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px clamp(44px,4.4vw,80px) 48px;
  background:#040c17;
}
.login-brand::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('../img/mywork/quote-bg.jpg');
  background-size:cover;
  background-position:center;
  opacity:.5;
  filter:saturate(.55) brightness(.85);
}
.login-brand::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(190deg, rgba(4,10,20,.35) 0%, rgba(4,10,20,.55) 40%, rgba(4,10,20,.94) 88%),
    linear-gradient(100deg, rgba(6,15,29,.96) 0%, rgba(6,15,29,.55) 42%, rgba(19,97,255,.22) 100%);
}
.login-brand > *{position:relative; z-index:1;}

.brand-top{display:flex; align-items:center; justify-content:space-between;}
.brand-chip{
  display:flex; align-items:center; gap:10px;
  background:rgba(4,10,20,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 14px 8px 10px;
  backdrop-filter:blur(6px);
}
.brand-chip img{height:26px; width:auto; display:block; border-radius:4px;}
.brand-chip b{font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.02em; color:#fff;}
.brand-os-badge{
  font-size:var(--fs-sm); font-weight:700; letter-spacing:.07em; color:var(--accent-on-dark, var(--accent-2));
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:6px; padding:4px 8px;
}

.brand-mid{max-width:760px; margin-top:auto;}
.brand-mid h1{
  font-size:clamp(30px,3.5vw,54px);
  line-height:1.15;
  font-weight:700;
  color:#fff;
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.brand-mid h1 em{color:var(--accent-on-dark, var(--accent-2)); font-style:normal;}
.brand-mid p{
  font-size:clamp(15px,1.18vw,17px); line-height:1.62; color:rgba(234,237,245,.82); max-width:640px;
}

.brand-features{
  display:flex; flex-direction:column; gap:16px;
  margin-top:36px; max-width:700px;
}
.brand-feature{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(13.5px,1.02vw,15px); color:rgba(234,237,245,.92);
}
.brand-feature .fi{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(19,97,255,.18); border:1px solid rgba(91,155,255,.28);
  color:var(--accent-2);
}
.brand-feature .fi svg{width:18px; height:18px;}
.brand-feature b{color:#fff; font-weight:600;}

.brand-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:28px; margin-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-sm); color:rgba(234,237,245,.55);
}
.brand-foot .status{display:flex; align-items:center; gap:7px;}
.brand-foot .dot{width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-soft);}

/* ---------- right: form panel ---------- */
.login-form-panel{
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(19,97,255,.10), transparent 60%),
    var(--bg);
}
.login-card{width:100%; max-width:392px;}
.login-card .mobile-brand{
  display:none; align-items:center; gap:10px; margin-bottom:28px;
}
@media (max-width:920px){
  .login-card .mobile-brand{display:flex;}
}
.login-card .mobile-brand img{height:28px;}

.login-card h2{font-size:24px; font-weight:700; color:var(--text); margin-bottom:6px;}
.login-card .sub{font-size:13.5px; color:var(--text-dim); margin-bottom:20px;}

.mode-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:22px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
}
.mode-tab{
  flex:1; border:0; background:transparent; cursor:pointer;
  padding:9px 10px; border-radius:7px; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  transition:background .15s, color .15s;
}
.mode-tab:hover{color:var(--text);}
.mode-tab.active{background:var(--accent); color:#fff; box-shadow:0 8px 18px -8px rgba(19,97,255,.6);}

.signup-domain-note{
  font-size:var(--fs-sm); color:var(--text-faint); line-height:1.6;
  background:var(--good-soft); border:1px solid rgba(23,217,166,.3);
  border-radius:9px; padding:9px 12px; margin:-4px 0 18px;
}
.signup-domain-note code{
  background:var(--panel-2); border:1px solid var(--border-soft); border-radius:5px;
  padding:1px 6px; color:var(--good); font-family:'IBM Plex Mono',monospace; font-size:10.5px;
}

.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--text-dim);
  margin-bottom:7px; letter-spacing:.01em;
}
.field .input-wrap{
  position:relative; display:flex; align-items:center;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; transition:border-color .15s, box-shadow .15s;
}
.field .input-wrap:focus-within{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field .input-wrap .ic{
  flex:none; width:38px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--text-faint);
}
.field .input-wrap .ic svg{width:16px; height:16px;}
.field input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--text); font-size:14px; font-family:inherit;
  padding:11px 12px 11px 0; height:40px;
}
.field input::placeholder{color:var(--text-faint);}
.field .toggle-eye{
  flex:none; width:38px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); cursor:pointer; background:none; border:0; padding:0;
}
.field .toggle-eye:hover{color:var(--text);}
.field .toggle-eye svg{width:16px; height:16px;}

.row-between{display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px;}
.check-remember{display:flex; align-items:center; gap:8px; min-height:24px; font-size:12.5px; color:var(--text-dim); cursor:pointer; user-select:none;}
/* 24px, not 18: WCAG 2.2 AA (2.5.8) measures the target itself. The label
   around it is clickable too, but the checkbox is what people aim at. */
.check-remember input{accent-color:var(--accent); width:24px; height:24px; cursor:pointer; flex:none;}
.forgot-link{font-size:12.5px; color:var(--accent-2); background:none; border:0; cursor:pointer; padding:0 2px; min-height:24px; font-family:inherit;}

.btn-submit{
  width:100%; height:44px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-dark));
  color:#fff; font-weight:700; font-size:14px; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 14px 30px -12px rgba(19,97,255,.55);
  transition:filter .15s, transform .15s;
}
.btn-submit:hover{filter:brightness(1.08);}
.btn-submit:active{transform:translateY(1px);}
.btn-submit:disabled{opacity:.65; cursor:default; filter:none;}
.btn-submit .spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.btn-submit.loading .spinner{display:inline-block;}
.btn-submit.loading .btn-label{opacity:.85;}
@keyframes spin{to{transform:rotate(360deg);}}

.error-banner{
  display:none; align-items:flex-start; gap:9px;
  background:var(--bad-soft); border:1px solid rgba(240,89,78,.35);
  color:#FFC9C4; font-size:12.5px; line-height:1.5;
  border-radius:10px; padding:11px 13px; margin-bottom:16px;
}
.error-banner.show{display:flex;}
.error-banner .ic{flex:none; color:var(--bad); margin-top:1px;}
.error-banner .ic svg{width:15px; height:15px;}

.divider{
  display:flex; align-items:center; gap:12px; margin:24px 0 18px;
  font-size:var(--fs-sm); color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase;
}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--border-soft);}

.demo-panel{
  border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius); padding:14px 14px 6px;
}
.demo-panel .demo-head{
  display:flex; align-items:center; gap:8px; margin-bottom:11px;
  font-size:var(--fs-sm); font-weight:700; color:var(--text-dim); letter-spacing:.03em; text-transform:uppercase;
}
.demo-panel .demo-head .ic{color:var(--gold); display:flex;}
.demo-panel .demo-head .ic svg{width:14px; height:14px;}
.demo-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.demo-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:9px; padding:7px 10px 7px 7px; cursor:pointer;
  font-size:12px; color:var(--text); transition:border-color .15s,background .15s;
}
.demo-chip:hover{border-color:var(--accent-line); background:var(--panel-hover);}
.demo-chip.loading{opacity:.55; pointer-events:none;}
.demo-chip .av{
  width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--border);
}
.demo-chip .nm{font-weight:600; font-size:12px;}
.demo-chip .rl{color:var(--text-faint); font-size:10.5px; display:block; margin-top:-1px;}
.demo-note{font-size:var(--fs-sm); color:var(--text-faint); padding-bottom:12px; line-height:1.6;}
.demo-note code{
  background:var(--panel-2); border:1px solid var(--border-soft); border-radius:5px;
  padding:1px 6px; color:var(--accent-2); font-family:'IBM Plex Mono',monospace; font-size:10.5px;
}

.login-foot-note{
  text-align:center; font-size:12px; color:var(--text-faint); margin-top:26px;
}

/* ---------- phones (<=920px): the form owns the whole screen ----------
   This block sits at the end of the file deliberately. `.login-brand` below
   the shell's media query sets display:flex at the same specificity, so the
   earlier `display:none` never won and the full hero was still stacking above
   the sign-in card on mobile — you had to scroll a screen and a half to reach
   the password field. Declared last, it now actually applies. */
@media (max-width:920px){
  .login-brand{display:none;}
  .login-card .mobile-brand{display:flex;}
}

/* ---------------------------------------------------------------------------
   Sep 13 2026 — mailbox-ownership verification step
   ---------------------------------------------------------------------------
   Self-signup no longer grants a seat on a typed address; it emails a 6-digit
   code first. These style the code entry screen that sits between "Create my
   account" and an account actually existing.
   ------------------------------------------------------------------------- */
.verify-lead{
  font-size:13px;line-height:1.6;color:var(--login-text-dim,#9aa4bd);
  margin:0 0 16px;
}
.code-input{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:24px!important;
  letter-spacing:.42em;
  text-align:center;
  font-weight:600;
  padding-left:14px!important;
}
.code-input::placeholder{letter-spacing:.42em;opacity:.32;}
.verify-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;flex-wrap:wrap;
}
.linkish{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--login-accent,#5B8DEF);
  text-decoration:underline;text-underline-offset:3px;
}
.linkish:hover{opacity:.82;}
.linkish:focus-visible{outline:2px solid var(--login-accent,#5B8DEF);outline-offset:3px;border-radius:4px;}