/* ============================================================
   FlipMap - css/login.css
   Login-page-only styles. Matches the legacy auth.php layout
   (placeholders-in-input, "System Access" title, sans-serif)
   while keeping the Lexicon/Shinra gray palette from core.css.
   Scoped to the .login-page wrapper so nothing inside the app
   shell gets affected.
   ============================================================ */

/* Pathfinder Taroca - used only for the login title lockup
   ("Paizo Flip Maps / System Access"). Scoped to .login-title
   so it never bleeds into anything else. */
@font-face {
  font-family: 'Pathfinder Taroca';
  src: url('../fonts/pathfinder-taroca.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.login-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:2em 1em;
  background:var(--bg-darkest);
  /* Override the serif body font for the login surface - matches
     the legacy Tailwind sans look. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

.login-card{
  background:var(--bg-dark);
  border:1px solid var(--border-thin);
  border-radius:var(--radius-md);
  padding:2.4em 2.4em 2em;
  box-shadow:var(--shadow-high);
  width:100%;
  max-width:400px;
}

.login-title{
  text-align:center;
  font-family:'Pathfinder Taroca','Cinzel',serif;
  font-weight:normal;        /* the Taroca face is already heavy */
  color:#7c3aed;             /* violet-600 - matches the screenshot */
  font-size:30px;            /* tuned so "Paizo Flip Maps" stays on one line */
  line-height:1.05;
  letter-spacing:0.04em;
  margin:0 0 1.4em;
  text-transform:none;       /* Taroca renders display caps natively */
  white-space:nowrap;        /* belt-and-braces: never wrap the title text */
}
.login-title .login-title-sub{
  display:block;
  font-size:inherit;         /* both lines same size */
  margin-top:0.1em;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:0.85em;
}

.login-input{
  width:100%;
  padding:0.65em 0.9em;
  background:#334155;        /* slate-700 - matches legacy input bg */
  border:1px solid #475569;  /* slate-600 */
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font:inherit;              /* inherit sans + size from .login-page */
  font-size:0.95em;
  transition:border-color 0.15s;
}
.login-input::placeholder{ color:#94a3b8; }   /* slate-400 */
.login-input:focus{
  outline:none;
  border-color:#a78bfa;      /* purple-400 */
}

.login-btn{
  width:100%;
  padding:0.7em;
  margin-top:0.3em;
  background:#9333ea;        /* purple-600 - matches legacy button */
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font:inherit;
  font-size:0.95em;
  font-weight:700;
  cursor:pointer;
  transition:background 0.15s;
}
.login-btn:hover{ background:#a855f7; }       /* purple-500 */

.login-link{
  margin:1.2em 0 0;
  text-align:center;
  font-size:0.82em;
  color:var(--text-faint);
  line-height:1.2;          /* tighter than body's 1.6 so consecutive rows hug */
}
/* Stack the link rows tightly so "Need an account? Register" and
   "Forgot your password? Recover" sit on consecutive lines with
   no breathing room between them - only the first row gets the
   gap below the button. */
.login-link + .login-link{ margin-top:0; }
.login-link a{
  color:#a78bfa;             /* purple-400, same as title */
  text-decoration:underline;
}
.login-link a:hover{ color:#c4b5fd; }         /* purple-300 */

.login-page .alert{
  font-family:inherit;
  font-size:0.85em;
  margin-bottom:1em;
}