<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VerIQ — log in to take the test</title>
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div class="wrap">
  <header class="top">
    <a class="logo" href="/">Ver<span>IQ</span></a>
    <span class="tagline">one step before the test</span>
  </header>

  <section class="hero" style="padding-bottom:12px">
    <h1 style="font-size:clamp(24px,5vw,36px)">Log in to take the test.</h1>
    <p class="lead">
      Your result will be bound to the account you pick <b>before</b> the test
      starts — that's what makes it verifiable. One active result per account:
      a new attempt replaces the old one, so nobody can cherry-pick.
    </p>
  </section>

  <section class="panel" id="loginPanel">
    <h2>Choose how to log in</h2>
    <div id="loginButtons" style="display:grid;gap:12px;margin-top:14px">
      <a class="btn" href="/auth/x/start" id="xBtn" style="text-align:center">Continue with X →</a>
      <button class="btn ghost" id="igBtn" disabled title="Instagram login is coming soon"
              style="text-align:center">Continue with Instagram (soon)</button>
    </div>
    <p id="already" style="display:none;margin-top:14px">
      You are already logged in as <b id="alreadyName" style="color:var(--accent)"></b>.
      <a href="/test" style="color:var(--accent)">Go to the test →</a>
    </p>
    <p style="margin-top:14px">
      We only read your public profile (ID, @username, avatar) — read-only,
      we never post. The @username is shown on your public result page.
    </p>
  </section>

  <footer>
    VerIQ · <a href="/how">how verification works</a> ·
    <a href="/.well-known/veriq-pubkey.txt">service public key</a>
  </footer>
</div>
<script src="/assets/login.js"></script>
</body>
</html>