<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#0f0f13" />
  <title>Hermes — Invite required</title>
  <style>
    :root {
      --bg: #0f0f13;
      --card: #1a1a22;
      --text: #e4e4e7;
      --muted: #8c8c96;
      --accent: #a78bfa;
      --border: #2a2a34;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      line-height: 1.5;
    }
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      max-width: 28rem;
      width: 100%;
    }
    .badge {
      display: inline-block;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: var(--accent);
      margin-bottom: 1rem;
    }
    h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 700;
    }
    p {
      color: var(--muted);
      margin: 0 0 1rem;
    }
    .icon {
      width: 3rem;
      height: 3rem;
      border-radius: 0.75rem;
      background: rgba(167, 139, 250, 0.15);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .steps {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0 0;
      counter-reset: step;
    }
    .steps li {
      counter-increment: step;
      padding: 0.5rem 0 0.5rem 2.5rem;
      position: relative;
      color: var(--text);
    }
    .steps li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: 0.4rem;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: rgba(167, 139, 250, 0.15);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
    }
    code {
      background: rgba(255, 255, 255, 0.04);
      padding: 0.1rem 0.4rem;
      border-radius: 0.25rem;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 0.85em;
      color: var(--accent);
    }
    .footer {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border);
      font-size: 0.8rem;
      color: var(--muted);
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="icon" aria-hidden="true">
      <!-- Shield icon, inline SVG so we don't depend on a network fetch -->
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      </svg>
    </div>
    <div class="badge">HERMES AGENT</div>
    <h1>You need an invite.</h1>
    <p>This Hermes Agent is gated behind Dream Server's magic-link auth. To reach the chat surface, an admin needs to send you an invite link from their dashboard.</p>

    <ol class="steps">
      <li>Ask the admin to open their dashboard's <strong>Invites</strong> page.</li>
      <li>They generate a magic-link with scope <code>chat</code> or <code>all</code>.</li>
      <li>They share the QR or URL with you — scan or tap once and you're in.</li>
    </ol>

    {{ $docsUrl := env "HERMES_PROXY_AUTH_DOCS_URL" }}{{ if $docsUrl }}
    <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text);">
      Need help? <a href="{{ $docsUrl }}" style="color: var(--accent); text-decoration: underline;">See the operator's notes</a>.
    </p>
    {{ end }}

    <p class="footer">
      Already have a link? Open it directly — redemption sets the session cookie
      this page is waiting for, and you'll be redirected straight to Hermes.
    </p>
  </div>
</body>
</html>
