/* /login page only. Sits on top of /poly.css and /assets/app/app.css:
   reuses .card, .f, .btn, .link, .notice, .muted, .small from there. */

.login-main{padding:56px 20px 112px;display:flex;justify-content:center}
.auth-card{max-width:440px;width:100%;margin:48px 0 0;padding:32px}
.auth-card h1{margin-top:0;font-size:32px;line-height:1.15}
.auth-card .notice{margin-top:16px}

/* one line under the heading: no seller/buyer/team picker, the account decides where you land */
.ctx-note{margin-top:10px;font-size:15.5px}

/* inputs at the 48px control height called for by the design brief */
.auth-card .f input{min-height:48px;padding:13px 15px;font-size:16px;line-height:1.2}

/* password field: a quiet Show/Hide text button inside the field, right-aligned,
   44px tap target tall (matches the 48px input) -- no icon library. */
.pwfield{position:relative}
.pwfield input{padding-right:66px}
.pwtoggle{position:absolute;top:0;right:0;bottom:0;width:58px;min-height:44px;
  background:none;border:0;padding:0;margin:0;font:500 13px var(--sans);color:var(--ink2);cursor:pointer}
.pwtoggle:hover{color:var(--ink)}
.pwtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.auth-card .actions .btn{flex:1 1 auto;justify-content:center}

.auth-links{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;margin-top:20px}
/* .link is styled for <a> by poly.css; these two actions are <button> elements
   (they run JS, not navigation), so strip native button chrome before its
   border-bottom/color rules take over. min-height:44px + align-items:flex-end keeps
   a real tap target on mobile without moving the underline away from the text. */
button.link{background:none;border:0;padding:8px 0 2px;font:inherit;font-size:15px;cursor:pointer;border-bottom:1px solid var(--line);display:inline-block;line-height:1.3}

.form-msg{margin-top:12px;font-size:14.5px;color:var(--ink2);min-height:1.2em}
.form-msg[data-bad]{color:#8c2f24}

.card-foot{margin-top:24px}

@media (max-width:480px){
  .login-main{padding:32px 20px 80px}
  .auth-card{margin-top:24px;padding:24px}
}