/* ============================================================
   NxtAtlas — auth (login.html)
   Loads after tokens.css. No new colours, no new fonts:
   everything below is composed from the design-system vars and
   the shared components (.shell .plate .lbl .eyebrow .btn .ul
   .chip .rule .rise/.d-* .wm).
   ============================================================ */

/* ---- page skeleton: header / centred form / footer -------- */
body.auth{
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100svh;
}

/* the pointer glow motion.js appends — fixed so the body grid
   never treats it as a row, and sized to the 520px box the
   script positions. */
.auth .cursor-glow{
  position:fixed; top:0; left:0; z-index:1;
  width:520px; height:520px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, var(--brass-faint), transparent 62%);
  will-change:transform;
}

/* ---- the instrument ----------------------------------------
   logo.png ships on a solid dark ground with the wordmark baked
   into its middle band, so it is screen-blended (the black falls
   away, only the brass rings survive), softened with a radial
   mask, and pushed 68% of its own height below the fold — the
   engraved letters stay off-canvas and just the rings rise out
   of the bottom-left corner. Under .plate, over the grain. */
.auth-orb{
  position:fixed; z-index:1; pointer-events:none;
  width:clamp(420px, 62vw, 900px); aspect-ratio:1;
  left:min(-22vw, -170px); bottom:0;
  translate:0 68%;
  background:url("/assets/logo-alpha.png") no-repeat center / contain;
  
  opacity:0;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 26%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%, #000 26%, transparent 62%);
  animation:orbIn 2.6s var(--ease) .4s forwards;
}
@keyframes orbIn{ to{ opacity:.34; } }

/* ---- top bar ---------------------------------------------- */
.auth-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px clamp(16px, 4vw, 40px); flex-wrap:wrap;
  padding-top:calc(var(--edge) + 24px);
}
.auth-lockup{ display:flex; align-items:center; gap:14px; min-width:0; }
.auth-mark{
  flex:none; width:46px; height:46px; border-radius:50%;
  box-shadow:0 0 0 1px var(--brass-faint), 0 12px 34px -14px var(--brass-soft);
}
.auth-lockup .wm{ font-size:12px; }
.auth-top-meta{ white-space:nowrap; }

/* ---- centre band ------------------------------------------ */
.auth-main{
  display:flex; align-items:center;
  padding-block:clamp(30px, 6vh, 76px);
}
.auth-grid{
  display:flex; flex-direction:column;
  gap:clamp(34px, 6vh, 54px);
  width:100%;
}
.auth-say       { order:1; }
.auth-panel     { order:2; }
.auth-opens-block{ order:3; }
/* one calm centred column until there is room for two */
.auth-say, .auth-panel, .auth-opens-block{ width:min(100%, 460px); margin-inline:auto; }

/* ---- the say ---------------------------------------------- */
.auth-title{
  font-size:clamp(2.3rem, 5.4vw, 3.7rem);
  line-height:.94;
  margin:22px 0 0;
}
.auth-title .wm{ letter-spacing:0; }
.auth-lede{ margin-top:20px; max-width:40ch; }

/* ---- the card --------------------------------------------- */
.auth-card{
  position:relative;
  padding:clamp(20px, 4vw, 30px);
  border:1px solid var(--line);
  border-radius:3px;
  background:linear-gradient(180deg, var(--ink-card), var(--ink-raise) 88%);
  box-shadow:inset 0 1px 0 var(--paper-faint), 0 38px 74px -44px var(--ink);
}
/* corner ticks, echoing the plate frame */
.auth-card::before,
.auth-card::after{
  content:""; position:absolute; width:8px; height:8px;
  border:0 solid var(--brass-soft); pointer-events:none;
}
.auth-card::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.auth-card::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

.auth-card-head{ margin-bottom:20px; }

/* ---- provider buttons ------------------------------------- */
/* isolation: keeps .btn::after (the brass sweep, z-index:-1)
   painting inside the button instead of behind the card. */
.auth .btn-provider{
  isolation:isolate;
  display:flex; width:100%;
  justify-content:flex-start; align-items:center; gap:12px;
  min-height:48px; padding:13px 16px;
  font-size:11.5px; letter-spacing:.14em;
  transition:color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),
             transform .12s var(--ease);
}
.auth .btn-provider:active{ transform:translateY(1px); }
.auth .btn-provider:focus-visible{ border-color:var(--brass); }

.auth .pico{
  flex:none; opacity:.82;
  transition:opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}
.auth .btn-provider:hover .pico,
.auth .btn-provider:focus-visible .pico{ opacity:1; }
.auth .plabel{ text-align:left; }

/* passkey: quietly the recommended road */
.auth .btn-passkey{
  border-color:var(--brass-soft);
  background:var(--brass-faint);
}
.auth .btn-passkey .pico{ color:var(--brass-lit); opacity:1; }
.auth .btn-passkey:hover .pico,
.auth .btn-passkey:focus-visible .pico{ color:var(--ink); }

.auth .ptag{
  margin-left:auto; flex:none;
  font-size:9px; letter-spacing:.18em; line-height:1;
  color:var(--brass);
  padding:5px 7px 4px;
  border:1px solid var(--brass-soft); border-radius:2px;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.auth .btn-passkey:hover .ptag{ color:var(--ink); border-color:var(--ink); }

/* substantive small text sits on --paper-soft, not --paper-dim:
   at 11px the dim token falls under 4.5:1 on the card. */
.auth-note{
  margin-top:10px;
  font-size:10.5px; line-height:1.6; letter-spacing:.01em;
  color:var(--paper-soft);
}

.auth-or{ margin-block:20px; }
.auth-pair{ display:grid; gap:10px; }

/* ---- small print ------------------------------------------ */
.auth-fine{
  margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11px; line-height:1.7; letter-spacing:.01em;
  color:var(--paper-soft);
}
.auth-fine a{ color:var(--paper); }

/* ---- back to the studio ----------------------------------- */
.auth-back{
  display:inline-flex; align-items:baseline; gap:9px;
  margin-top:22px;
}
.auth-back span{
  display:inline-block;
  transition:transform var(--fast) var(--ease);
}
.auth-back:hover span{ transform:translateX(-4px); }

/* ---- what the account opens ------------------------------- */
.auth-opens-head{ margin-bottom:4px; }
.auth-opens{ list-style:none; margin:0; padding:0; }
.auth-opens li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:12px 2px;
  border-bottom:1px solid var(--line);
}
.auth-opens li:first-child{ border-top:1px solid var(--line); }
.auth-op{
  font-family:var(--serif); font-size:clamp(1.05rem, 2.4vw, 1.2rem);
  line-height:1.15; letter-spacing:-.01em;
}

/* ---- footer ----------------------------------------------- */
.auth-foot{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 28px;
  padding-top:26px; padding-bottom:calc(var(--edge) + 22px);
}

/* ============================================================
   WIDE: the say and the index sit left, the form sits right —
   asymmetric page, symmetric form.
   ============================================================ */
@media (min-width:920px){
  .auth-grid{
    display:grid; align-items:start;
    grid-template-columns:minmax(0, 1fr) minmax(0, 430px);
    grid-template-areas:
      "say   panel"
      "opens panel";
    gap:0 clamp(44px, 7vw, 104px);
  }
  .auth-say        { grid-area:say;   width:auto; margin-inline:0; }
  .auth-panel      { grid-area:panel; width:auto; margin-inline:0; align-self:center; }
  .auth-opens-block{ grid-area:opens; width:auto; margin-inline:0; margin-top:clamp(34px, 5vh, 58px); }
  .auth-lede{ max-width:44ch; }
}

/* ============================================================
   NARROW: 360px stays comfortable — the labels shed their
   "Continue with" so the marks, names and tag never collide.
   ============================================================ */
@media (max-width:430px){
  .auth-orb{
    left:-42vw;
    width:clamp(340px, 120vw, 560px);
    translate:0 66%;
  }
  @keyframes orbIn{ to{ opacity:.3; } }
  .auth .pfx{ display:none; }
  .auth .btn-provider{ gap:11px; padding-inline:14px; }
  .auth-mark{ width:40px; height:40px; }
  .auth-top{ padding-top:calc(var(--edge) + 18px); }
  .auth-top-meta{ display:none; }
}

/* tokens.css kills every animation under this setting — hand the
   instrument its resting opacity back so the mark does not vanish. */
@media (prefers-reduced-motion:reduce){
  .auth-orb{ opacity:.34; }
  @media (max-width:430px){ .auth-orb{ opacity:.3; } }
}

/* the lockup links home; it must not start looking like a link */
a.auth-lockup{ text-decoration:none; color:inherit; transition:opacity var(--fast) var(--ease); }
a.auth-lockup:hover{ opacity:.74; }

/* ============================================================
   A status line that takes up no room until it has something
   to say — used on both the sign-in and the account page.
   ============================================================ */
.auth-status{
  margin:12px 0 0; font-size:13px; line-height:1.55; color:var(--paper-soft);
}
.auth-status:empty{ display:none; }
.auth-status.is-error{ color:#e5a3a3; }

/* ============================================================
   ACCOUNT PAGE
   Same furniture as the sign-in page, in one column.
   ============================================================ */
.acc-main{
  display:flex; flex-direction:column; gap:clamp(30px,4.4vh,48px);
  max-width:660px; padding-block:clamp(24px,5vh,52px) clamp(30px,6vh,60px);
}

.acc-id{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.acc-avatar{ border-radius:50%; display:block; border:1px solid var(--line-strong); }
.acc-name{ font-size:clamp(1.5rem,3.4vw,2rem); margin:0; letter-spacing:-.03em; }
.acc-email{ margin:4px 0 0; color:var(--paper-soft); font-size:14.5px; }
.acc-method{ margin:6px 0 0; }

.acc-block-head{ margin-bottom:16px; }
.acc-copy{ color:var(--paper-dim); font-size:14.5px; line-height:1.65; max-width:52ch; }

/* ---- the passkeys themselves ---- */
.pk-list{ list-style:none; margin:20px 0 0; padding:0;
          display:flex; flex-direction:column; gap:2px; }
.pk-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-top:1px solid var(--line);
}
.pk-row:last-child{ border-bottom:1px solid var(--line); }
.pk-label{ font-size:15px; }
.pk-meta{ margin-top:5px; letter-spacing:.08em; }
.pk-del{ flex:none; font-size:13px; padding-inline:6px; }
.pk-del:hover{ color:#e5a3a3; }
.pk-empty{
  padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  letter-spacing:.04em; text-transform:none; font-size:13px;
}

.acc-add{ margin-top:22px; }
.acc-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.acc-note{ margin:0; }

/* the orb belongs to the sign-in page's composition; here it just anchors
   the bottom-left corner, so keep it quieter */
.account .auth-orb{ opacity:.5; }