/* ============================================================
   AUTH UI — guest/login gate + account chip. Reuses the room-form
   language (.room-scene, .room-form, .rm-*) from room.css; only the
   auth-specific pieces live here.
   ============================================================ */

/* two paths instead of the landing's three */
.auth-paths { grid-template-columns:repeat(2,minmax(0,250px)); max-width:560px; }
@media (max-width:760px){ .auth-paths { grid-template-columns:1fr; max-width:420px; } }

/* quiet secondary links under the gate / forms */
.auth-skip, .auth-switch {
  position:relative; z-index:1; margin-top:1.1rem; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.82rem; letter-spacing:.03em;
  color:hsl(var(--muted-foreground)); transition:color .2s;
}
.auth-switch { margin-top:.1rem; align-self:center; }
.auth-skip:hover, .auth-switch:hover { color:hsl(var(--primary)); }

.auth-note { position:relative; z-index:1; margin-top:1rem; max-width:520px; text-align:center; }

/* success / info line (warm green, distinct from .rm-err) */
.auth-msg {
  font-size:.8rem; line-height:1.4; padding:.55rem .7rem; border-radius:10px;
  color:hsl(146 45% 72%); background:hsl(146 40% 30% / .14);
  box-shadow:inset 0 0 0 1px hsl(146 40% 50% / .25);
}

/* ---------- account chip (top-left on the landing) ---------- */
.acct-wrap { position:fixed; top:12px; left:14px; z-index:9000; }
.acct-chip {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem .4rem .55rem;
  border-radius:999px; cursor:pointer; font-family:var(--font-body);
  font-size:.78rem; color:hsl(var(--foreground));
}
.acct-dot { width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 8px currentColor; }
.acct-dot.guest { color:hsl(38 80% 60%);  background:currentColor; }
.acct-dot.full  { color:hsl(146 55% 55%); background:currentColor; }
.acct-label { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.acct-menu {
  position:absolute; top:calc(100% + 8px); left:0; width:min(280px,86vw);
  display:flex; flex-direction:column; gap:.6rem; padding:.9rem; border-radius:16px;
  animation:fade-rise .22s ease both;
}
.acct-head { display:flex; align-items:center; gap:.6rem; }
.acct-head > div { min-width:0; }
.acct-name { font-family:var(--font-display); font-size:.96rem; color:hsl(var(--foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-kind { font-size:.72rem; color:hsl(var(--muted-foreground)); }
.acct-form { display:flex; flex-direction:column; gap:.55rem; }
.acct-signout {
  background:none; border:none; cursor:pointer; align-self:flex-start; padding:0;
  font-family:var(--font-body); font-size:.78rem; color:hsl(var(--muted-foreground)); transition:color .2s;
}
.acct-signout:hover { color:hsl(var(--destructive,0 70% 60%)); }

@keyframes fade-rise { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }