/* mvexpense — sign in / create account.
   One centred column. On a phone it fills the screen; on desktop it sits in a
   card on the paper ground rather than floating in the middle of nothing. */

.auth{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px var(--page) 48px;
}

.auth__inner{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.auth__head{display:flex; flex-direction:column; gap:8px}

.auth__mark{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.auth__head h1{margin-top:2px}
.auth__head p{font-size:15px; max-width:34ch}

.auth__alt{
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
}
.auth__alt a{font-weight:600}

/* Desktop: lift the column onto a surface so it reads as a considered panel
   rather than text stranded on a wide empty page. */
@media (min-width:600px){
  .auth__inner{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:34px 34px 28px;
    box-shadow:var(--shadow);
  }
}

/* Password reveal. The button sits inside the field's box, so the input keeps
   room for the icon rather than running text underneath it. */
.pw{position:relative; display:flex}
.pw .input{padding-right:46px}
.pw__eye{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  font-size:15px; line-height:1; cursor:pointer;
  background:transparent; border:0; border-radius:var(--r);
  color:var(--ink-3); opacity:.65;
}
.pw__eye:hover{opacity:1; background:var(--surface-2)}
.pw__eye.is-on{opacity:1; color:var(--accent)}