<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign in - Rise</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <script>{% include "_auth-theme.js.tera" %}</script>
    <style>
        {% include "_auth-tokens.css.tera" %}
        * { box-sizing: border-box; }
        body {
            margin: 0; min-height: 100vh;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            color: var(--text); background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            padding: 24px; letter-spacing: -0.005em;
            -webkit-font-smoothing: antialiased;
        }
        .card {
            width: 100%; max-width: 420px;
            background: var(--surface);
            border: 1px solid var(--border-faint);
            border-radius: 14px;
            box-shadow: var(--shadow-md);
            padding: 36px 32px; text-align: center;
        }
        .logo {
            width: 48px; height: 48px; margin: 0 auto;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent), oklch(0.62 0.18 245));
            display: grid; place-items: center;
            color: #fff; font-weight: 700; font-size: 22px;
        }
        h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 0; }
        p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; }
        .pill {
            display: inline-block; font-size: 11.5px; font-weight: 500;
            padding: 2px 9px; border-radius: 999px; margin-top: 12px;
            background: var(--surface-2); color: var(--muted);
            border: 1px solid var(--border-faint);
        }
        .mono {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            background: var(--surface-2); border: 1px solid var(--border-faint);
            border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
            color: var(--text); word-break: break-all;
        }
        .btn {
            display: block; width: 100%; text-align: center;
            background: var(--accent); color: var(--accent-fg);
            border: none; border-radius: 7px;
            padding: 10px 14px; margin-top: 22px;
            font-size: 13px; font-weight: 500; text-decoration: none;
            font-family: inherit; cursor: pointer;
        }
        .btn:hover { filter: brightness(1.06); }
        small { font-size: 12px; color: var(--soft); }
    </style>
</head>
<body>
    <div class="card">
        <div class="logo" aria-hidden="true">R</div>
        <span class="pill">Private project</span>
        <h1>Authentication required</h1>
        <p>
            The project <span class="mono">{{ project_name }}</span> is private.
            Sign in with your identity provider to continue — you'll return here afterwards.
        </p>
        <a href="{{ continue_url }}" class="btn">Sign in</a>
        {% if redirect_url %}
        <p style="margin-top: 16px;">
            <small>Redirect target</small><br>
            <span class="mono">{{ redirect_url }}</span>
        </p>
        {% endif %}
    </div>
</body>
</html>
