/* ===========================================================================
   auth.css - sign in, registration, portal invitation

   Replaces css/login.css and css/register.css. The old login.css positioned
   everything by coordinate (.wrapper absolute, the form table at top:30px,
   the "lost password?" link pinned at top:320px), so the link landed on the
   form whenever the error message pushed it down. Nothing here is positioned
   by coordinate.

   Same tokens as landing.css - navy #09316F and olive #375A06 from the TCRSD
   mark - so signing in and the account page look like one product.
   =========================================================================== */

:root{
  --ground:#F4F6F9;
  --surface:#FFFFFF;
  --surface-2:#EDF1F7;
  --ink:#14203A;
  --ink-2:#4A5A73;
  --ink-3:#7B8AA1;
  --line:#DCE3ED;
  --line-2:#C3CEDE;
  --navy:#09316F;
  --navy-lift:#0C4192;
  --navy-soft:#E7EDF8;
  --olive:#375A06;
  --olive-soft:#EAF1DF;
  --err:#8C3113;
  --err-soft:#FBEBE4;
  --shadow:0 1px 2px rgba(20,32,58,.06), 0 10px 28px rgba(20,32,58,.06);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:28px 16px 60px;
  background:var(--ground);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------- brand band
   Only the standalone pages use this. login.php and forgot_password.php sit
   inside the portal shell, which already shows the logo and phone numbers -
   repeating them there would just be two logos stacked. */
.authBrand{
  display:flex; align-items:center; gap:14px;
  max-width:960px; margin:0 auto 26px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.authBrand img{ height:44px; width:auto; }
.authBrand .t{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.authBrand .p{ font-size:12.5px; color:var(--ink-3); }
.authBrand .p a{ color:var(--ink-2); text-decoration:none; }
.authBrand .p a:hover{ text-decoration:underline; }

/* ------------------------------------------------------------------ card */
.authCard{
  max-width:420px; margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:26px 26px 22px;
}
.authCard.wide{ max-width:520px; }

.authCard h1{
  margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.015em;
}
.authCard .lede{
  margin:0 0 20px; font-size:14.5px; color:var(--ink-2);
}

/* ----------------------------------------------------------------- fields */
.field{ margin-bottom:16px; }
.field label,
.field > .lbl{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
}
.field .hint{ margin-top:6px; font-size:12.5px; color:var(--ink-3); line-height:1.45; }

input[type=text],
input[type=email],
input[type=tel],
input[type=password]{
  width:100%;
  padding:12px 14px;
  font-family:inherit; font-size:16px;   /* 16px stops iOS zooming on focus */
  color:var(--ink); background:var(--surface);
  border:2px solid var(--line-2); border-radius:10px;
  transition:border-color .15s;
}
input:focus{ outline:0; border-color:var(--navy); }
input::placeholder{ color:var(--ink-3); }

/* password field with the reveal control */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:46px; }
.toggle-eye{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:none; border:0; border-radius:8px;
  cursor:pointer; font-size:16px; line-height:1; opacity:.55;
}
.toggle-eye:hover{ opacity:1; background:var(--surface-2); }
.toggle-eye:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; opacity:1; }

.check{
  display:flex; align-items:flex-start; gap:9px;
  margin:18px 0; font-size:14.5px; color:var(--ink-2); cursor:pointer;
}
.check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--navy); flex:0 0 auto; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:800; font-size:16px;
  padding:13px 20px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
.btn-primary{ background:var(--navy); color:#fff; width:100%; }
.btn-primary:hover{ background:var(--navy-lift); }
.btn-ghost{
  background:var(--surface); color:var(--ink-2); border-color:var(--line-2);
  font-size:14px; font-weight:700; padding:10px 16px;
}
.btn-ghost:hover{ border-color:var(--navy); color:var(--navy); }

/* -------------------------------------------------------------- messages */
.msg{
  padding:12px 14px; border-radius:10px; margin:0 0 18px;
  font-size:14.5px; line-height:1.45;
}
.msg-err{ background:var(--err-soft); border:1px solid var(--err); color:var(--err); }
.msg-ok { background:var(--olive-soft); border:1px solid var(--olive); color:var(--olive); }
.msg-info{ background:var(--navy-soft); border:1px solid var(--navy); color:var(--navy); }
.msg ul{ margin:6px 0 0 18px; padding:0; }

/* per-field error text */
.help-block{ display:block; margin-top:6px; font-size:13px; color:var(--err); }
.has-error input{ border-color:var(--err); }

/* ------------------------------------------------------------ footer link */
.authFoot{
  max-width:420px; margin:16px auto 0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  text-align:center;
}
.authFoot form{ margin:0; }
.authFoot .note{
  max-width:420px; margin:18px auto 0;
  font-size:13px; color:var(--ink-3); text-align:center; line-height:1.5;
}
.authFoot .note a{ color:var(--navy); }

@media (max-width:480px){
  body{ padding:18px 12px 44px; }
  .authCard{ padding:20px 18px 18px; border-radius:12px; }
  .authBrand img{ height:36px; }
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:#0D1220; --surface:#151D2E; --surface-2:#1D2739;
    --ink:#E6EBF4; --ink-2:#9FAEC6; --ink-3:#74839B;
    --line:#25314A; --line-2:#35435F;
    --navy:#7FA9E8; --navy-lift:#9CBEF0; --navy-soft:#16233C;
    --olive:#9CC46A; --olive-soft:#1A2416;
    --err:#E9A88A; --err-soft:#2C1A12;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
  }
  .btn-primary{ color:#0D1220; }
}