/* Company Client Portal — guest screens (login / set-password).
   Loaded ONLY on the two guest pages. Reuses portal.css design tokens
   (--accent etc., including the tenant override injected in base.html) and
   overrides the shared page chrome to a clean, centered single-card layout. */

/* Full-bleed white page: neutralise the shared "paper" background + main/container chrome. */
body{background:var(--surface);background-image:none}
main{padding:0;animation:none}
.container{max-width:none;margin:0;padding:0}

.pa{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:24px;
}

/* brand, pinned to the top-left corner like the reference */
.pa__brand{
  position:fixed;top:22px;left:24px;z-index:2;
  display:flex;align-items:center;gap:10px;
  color:var(--ink);
}
.pa__brand img{height:28px;width:auto;display:block}
.pa__mark{
  width:30px;height:30px;border-radius:8px;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:.95rem;font-family:var(--sans);
}
.pa__name{font-weight:600;font-size:1rem;letter-spacing:-.01em}

/* centered, two-layer card */
.pa__center{flex:1;display:grid;place-items:center}
.pa__frame{
  width:100%;max-width:452px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:7px;
  box-shadow:var(--shadow);
}
.pa__card{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:13px;
  padding:30px 28px;
}
.pa__title{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0 0 4px;
  color:var(--ink);
}
.pa__sub{color:var(--muted);font-size:.92rem;margin:0 0 22px}

/* fields */
.pa__field{margin-bottom:16px}
.pa__field label{display:block;font-size:.84rem;font-weight:560;letter-spacing:.01em;margin-bottom:6px;color:var(--ink)}
.pa__input{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px;
  padding:11px 13px;transition:border-color .15s,box-shadow .15s;
}
.pa__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pa__error{color:var(--danger);font-size:.86rem;margin-top:6px}

/* password field with show/hide toggle */
.pa__pw{position:relative}
.pa__pw .pa__input{padding-right:44px}
.pa__pwtoggle{
  position:absolute;top:6px;right:6px;
  width:32px;height:32px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:6px;transition:color .15s,background .15s;
}
.pa__pwtoggle:hover{color:var(--ink);background:var(--accent-soft)}
.pa__pwtoggle:focus-visible{outline:none;color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.pa__pwtoggle svg{width:18px;height:18px;display:block}
.pa__pwtoggle .pa__eye-off{display:none}
.pa__pwtoggle.is-on .pa__eye{display:none}
.pa__pwtoggle.is-on .pa__eye-off{display:block}

/* remember me */
.pa__remember{display:flex;align-items:center;gap:9px;margin:2px 0 20px}
.pa__remember input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.pa__remember label{cursor:pointer;margin:0;font-size:.9rem;font-weight:500;color:var(--ink)}

/* primary button — keeps the tenant accent */
.pa__btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:12px 18px;border:1px solid transparent;border-radius:8px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  transition:box-shadow .15s ease,transform .12s ease;
}
.pa__btn:hover{box-shadow:var(--shadow-lift)}
.pa__btn:active{transform:translateY(1px)}

/* non-field error banner */
.pa__alert{
  display:flex;gap:10px;padding:11px 14px;border-radius:8px;
  border:1px solid var(--danger);background:#fbf1ef;color:var(--danger);
  font-size:.9rem;margin-bottom:16px;
}

/* muted footnote, inside the outer frame below the card */
.pa__foot{text-align:center;color:var(--muted);font-size:.86rem;padding:15px 16px 9px}

@media (max-width:480px){
  .pa{padding:20px}
  .pa__brand{position:static;margin-bottom:18px}
  .pa__card{padding:24px 20px}
}

@media (prefers-reduced-motion:reduce){
  .pa__btn{transition:none}
}