/* app.css — layout + component structure.
 *
 * Structure/spacing only; all colour/type/visual identity comes from
 * tokens.css via var(). Reskinning = edit tokens.css, not this file.
 */

/* ── boot ──────────────────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── login surface ─────────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 22px 24px 18px;
}

.login__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login__main {
  display: grid;
  place-items: center;
}

.login__card {
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 30px;
  text-align: center;
  animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.login__kernel {
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
/* slow breathing glow on the signature mote */
.login__kernel .kernel { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 22px var(--kernel), 0 0 50px rgba(255, 140, 60, .45); }
  50% { box-shadow: 0 0 30px var(--kernel), 0 0 72px rgba(255, 140, 60, .6); }
}

.login__h {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}

.login__sub {
  margin: 0 0 26px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink2);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login__form .cta { width: 100%; }

/* passkey-primary + email-fallback */
.login__passkey { width: 100%; margin-bottom: 4px; }
.login__or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
}
.login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--panel-line); }
.login__email-cta {
  width: 100%;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--panel-line); background: var(--panel-solid);
  color: var(--ink2); font-family: var(--sans); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.login__email-cta:hover { border-color: var(--violet-line); color: var(--ink); }
.login__email-cta:disabled { opacity: .55; cursor: default; }

/* Respect reduced-motion (accessibility + steady demo environments): keep the
   cosmic look, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── founding ceremony (a world ignites) ───────────────────── */
.founding {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  text-align: center;
  padding: 24px;
}
.founding__core {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
/* the radiant bloom behind the world */
.founding__core::before {
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,122,.5), rgba(139,139,255,.25) 45%, transparent 70%);
  animation: founding-bloom 2.6s var(--ease, cubic-bezier(.2,.7,.2,1)) forwards;
}
.founding__world {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #fff, var(--kernel) 22%, var(--violet) 60%, #2b2f63 100%);
  box-shadow: 0 0 40px var(--kernel), 0 0 90px rgba(139,139,255,.6);
  animation: founding-rise 2.6s var(--ease, cubic-bezier(.2,.7,.2,1)) forwards;
}
@keyframes founding-bloom {
  0%   { transform: scale(.2); opacity: 0; }
  35%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: .55; }
}
@keyframes founding-rise {
  0%   { transform: scale(.1); opacity: 0; filter: brightness(2.4); }
  40%  { transform: scale(1.12); opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
.founding__cap { color: var(--ink3); animation: rise .8s .5s ease both; }
.founding__name {
  margin: 2px 0 0; font-size: 30px; font-weight: 600; color: var(--ink);
  letter-spacing: .01em; animation: rise .8s .7s ease both;
  text-shadow: 0 0 24px rgba(139,139,255,.4);
}
.founding__role { color: var(--heat); animation: rise .8s .95s ease both; }

/* passkeys manage surface */
.login__card--wide { max-width: 460px; }
.pk-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; text-align: left; }
.pk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r2);
  border: 1px solid var(--panel-line); background: var(--panel-solid);
}
.pk-row__name { flex: 1; font-size: 13px; color: var(--ink); }
.pk-row__rm {
  background: none; border: none; color: var(--ink3);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.pk-row__rm:hover { color: var(--heat2); }

.login__msg {
  margin: 14px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1.2em;
}
.login__msg--ok { color: var(--built); }
.login__msg--err { color: var(--heat2); }
.login__msg b { color: var(--kernel); font-weight: 600; }

/* sent-state confirmation */
.login__sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: rise .4s ease both;
}
.login__sent .cap { line-height: 1.6; }
.login__linkback {
  background: none;
  border: none;
  color: var(--violet);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px;
}
.login__linkback:hover { color: var(--ink); }

.login__foot {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  opacity: .8;
}

/* ── setup surface (entity/product) ────────────────────────── */
.setup {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px 22px 16px;
}
.setup__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.setup__who {
  margin-left: auto;
}
.setup__signout {
  background: none;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--ink3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  cursor: pointer;
}
.setup__signout:hover { color: var(--ink); border-color: var(--violet-line); }

.setup__main {
  display: grid;
  place-items: start center;
  padding: 24px 0;
}
.setup__step, .setup__empty { width: 100%; max-width: 760px; animation: rise .4s ease both; }
.setup__empty { text-align: center; padding-top: 40px; }
.setup__loading { text-align: center; padding-top: 60px; }

.setup__h { margin: 0 0 6px; font-size: 21px; font-weight: 600; color: var(--ink); }
.setup__sub { margin: 0 0 22px; font-size: 13px; color: var(--ink2); line-height: 1.5; }

.setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.setup__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.setup__card:hover { border-color: var(--violet-line); box-shadow: 0 0 0 1px var(--violet-dim); }
.setup__card:active { transform: translateY(1px); }
.setup__card--active { border-color: var(--heat); box-shadow: 0 0 0 1px rgba(255,178,77,.3), 0 0 24px rgba(255,140,60,.2); }
.setup__world { font-size: 26px; color: var(--violet); line-height: 1; }
.setup__card-name { font-size: 14.5px; font-weight: 600; }
.setup__card-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
}

.setup__back {
  background: none;
  border: none;
  color: var(--violet);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 12px;
}
.setup__back:hover { color: var(--ink); }
.setup__enter { margin-top: 22px; }
.setup__msg { font-size: 13px; margin: 0 0 16px; }