{% extends 'pages/auth/_standalone.html' %}

{# error/403 — faithful port of src/html/error/403.html
   Standalone off-app status page (no sidebar/header). Same DOM/classes/ARIA,
   same demo copy. Reference hrefs converted to clean Django routes
   (# -> /x/, index -> /). #}

{% block auth_body %}
  <div style="position:fixed;top:var(--ax-space-5);right:var(--ax-space-6);z-index:5;display:flex;gap:var(--ax-space-2);align-items:center;" x-data="{}">
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Toggle color theme"
            @click="document.documentElement.setAttribute('data-ax-theme', document.documentElement.getAttribute('data-ax-theme')==='dark' ? 'light' : 'dark')">
      <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008"/></svg>
    </button>
    <a class="ax-btn ax-btn--ghost ax-btn--sm" href="/">
      <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
      <span class="ax-btn__label">Back to dashboard</span>
    </a>
  </div>

  <main class="ax-center" id="ax-main" style="position:relative;z-index:1;width:100%;padding:var(--ax-space-6);">
    <div style="width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ax-space-6);">

      <a href="/" aria-label="Vireo home" style="display:inline-flex;align-items:center;gap:var(--ax-space-3);text-decoration:none;">
        <span aria-hidden="true" style="display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--ax-radius-md);background:var(--ax-gradient-accent);color:var(--ax-on-accent);box-shadow:0 8px 22px -8px rgba(var(--ax-accent-rgb),.7);">
          <svg viewBox="0 0 32 32" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="axmk0" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#2BC4B0"/><stop offset="0.55" stop-color="#1E9E96"/><stop offset="1" stop-color="#6D5CF0"/></linearGradient></defs><path d="M4 4 H16 A12 12 0 0 1 28 16 V28 A0 0 0 0 1 28 28 H16 A12 12 0 0 1 4 16 V4 Z" fill="url(#axmk0)" stroke="none"/><circle cx="20.5" cy="11.5" r="2.6" fill="#0A0C11" fill-opacity="0.92" stroke="none"/></svg>
        </span>
        <span style="font-family:var(--ax-font-display);font-weight:600;font-size:var(--ax-text-lg);color:var(--ax-text-strong);letter-spacing:.01em;">Vireo</span>
      </a>

      <!-- thin-line illustration: shield with lock (accent highlight on the lock dot) -->
      <div aria-hidden="true" style="position:relative;display:grid;place-items:center;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 50% 40%, var(--ax-accent-wash), transparent 70%);">
        <span style="position:absolute;inset:0;border-radius:50%;border:1px dashed var(--ax-border-strong);"></span>
        <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="var(--ax-text-muted)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/><path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" stroke="var(--ax-accent)"/><path d="M12 12l0 2.5" stroke="var(--ax-accent)"/>
        </svg>
      </div>

      <div>
        <h1 style="margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);">
          <span class="ax-num" style="font-family:var(--ax-font-mono);font-weight:600;font-size:var(--ax-text-4xl);line-height:1;color:var(--ax-text-strong);letter-spacing:.04em;">403</span>
          <span style="font-family:var(--ax-font-display);font-weight:600;font-size:var(--ax-text-2xl);color:var(--ax-text-strong);">Access denied</span>
        </h1>
        <p style="margin:var(--ax-space-4) auto 0;max-width:44ch;font-size:var(--ax-text-md);color:var(--ax-text-muted);line-height:1.55;">
          You're signed in, but you don't have permission to view this page. If you think this is a mistake, ask a workspace admin to grant you access.
        </p>
      </div>

      <div style="display:flex;flex-wrap:wrap;gap:var(--ax-space-3);justify-content:center;">
        <a class="ax-btn ax-btn--primary" href="/">
          <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13a1 1 0 0 1 1 -1h7v-7a1 1 0 0 1 1 -1h7a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z"/></svg>
          <span class="ax-btn__label">Go to dashboard</span>
        </a>
        <a class="ax-btn ax-btn--secondary" href="/pages/support/">
          <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 11h6m-3 -3v6"/></svg>
          <span class="ax-btn__label">Request access</span>
        </a>
      </div>

      <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-subtle);">
        Signed in as the wrong account? <a class="ax-link" href="/auth/sign-in-basic/">Switch user</a>
      </p>
    </div>
  </main>
{% endblock %}