{# Plan 59 — member welcome card (Row 1).
   Subtle, personal hello + fleet/role context. Server-rendered for
   no-flash; the JS fetch of /overview/me is the back-up that lets us
   personalise if the page is opened mid-token-refresh. #}
<div class="card p-5">
  <div class="flex items-start justify-between gap-4 flex-wrap">
    <div>
      <h1 class="text-[22px] font-semibold text-ink-100 tracking-tight">
        Hello, <span x-text="(data.me && data.me.display_name) || '{{ (user.display_name if user else 'there') }}'"></span>.
      </h1>
      <p class="text-[13px] text-ink-400 mt-1">
        Signed in to
        <span class="text-ink-200" x-text="(data.me && data.me.fleet_name) || '{{ fleet.name }}'"></span>
        as
        <span class="text-ink-200" x-text="(data.me && data.me.role) || '{{ member_role or 'member' }}'"></span>.
      </p>
    </div>
    <a href="/admin/profile"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">
      <i data-lucide="user" class="w-3.5 h-3.5"></i>
      Profile
    </a>
  </div>
</div>