<script setup lang="ts">
definePageMeta({ layout: false });
useHead({ title: "Signed Out — Ghost Guild" });
</script>

<template>
  <main class="auth-shell">
    <div class="dashed-box auth-box">
      <header class="auth-header">
        <p class="section-label">Ghost Guild</p>
        <h1 class="auth-title">Signed Out</h1>
      </header>

      <hr class="section-divider" />

      <p class="auth-body" role="status">
        You've been signed out.
      </p>

      <a href="https://wiki.ghostguild.org" class="btn btn-primary auth-btn">
        Return to Wiki
      </a>
    </div>
  </main>
</template>

<style scoped>
.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-pad-y) var(--page-pad-x);
}

.auth-box {
  width: 100%;
  max-width: 360px;
  padding: 24px 28px;
}

.auth-header {
  text-align: center;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--candle);
  margin: 0;
}

.auth-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  text-align: center;
  margin: 0;
}

.auth-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
</style>
