/* ─────────────────────────────────────────────────────────────────────
   NewSpace Lab 帳號元件（跨站共用樣式）
   ─────────────────────────────────────────────────────────────────────
   單一事實來源：主站 www.newspacelab.com、Space Careers、Learning Center、
   Rocketry Toolchain 共用同一組登入身分（同一個 Firebase 使用者池），
   使用者在四個站之間走動，帳號區塊長得不一樣只會讓人懷疑「我到底登入了沒」。

   這份檔案只管**外觀**，不含任何行為：各站的登入流程、事件與框架都不同
   （主站是 React＋Tailwind，Space Careers 與 Learning Center 是 vanilla JS），
   共用元件不切實際，共用樣式與標記契約才是可行的最小公倍數。

   ── 標記契約（照這個結構寫，就會長得一樣）──────────────────────────
   <div class="nsl-acct">                      定位錨點（position: relative）
     <button class="nsl-acct-btn">             觸發鈕（藥丸形）
       <span class="nsl-acct-avatar">…</span>  頭像／人像圖示（登出狀態放人像 svg）
       <span class="nsl-acct-label">…</span>   名稱或「註冊／登入」
       <svg class="nsl-acct-caret">…</svg>     ▾（開啟時自動翻轉）
     </button>
     <div class="nsl-acct-panel">              下拉面板
       <div class="nsl-acct-head">             登入後：名稱＋email（＋方案標記）
       <button class="nsl-acct-item">          選單項目（含 .is-danger 變體）
     </div>
   </div>

   ── 主題 ────────────────────────────────────────────────────────────
   顏色全部走 CSS 變數，各站只要對應到自己的設計代幣即可；沒定義時退回
   主站的深色值，所以直接貼進深色站也能用。淺色站（Space Careers）在
   自己的樣式表把這些變數指到既有代幣就好。
   ───────────────────────────────────────────────────────────────────── */

.nsl-acct {
  --nsl-fg: var(--nsl-acct-fg, #fff);
  --nsl-fg-muted: var(--nsl-acct-fg-muted, rgba(255, 255, 255, 0.5));
  --nsl-line: var(--nsl-acct-line, rgba(255, 255, 255, 0.15));
  --nsl-line-strong: var(--nsl-acct-line-strong, rgba(255, 255, 255, 0.3));
  --nsl-panel-bg: var(--nsl-acct-panel-bg, #111);
  --nsl-hover: var(--nsl-acct-hover, rgba(255, 255, 255, 0.06));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;          /* 見下方 .nsl-acct-label 的說明 */
}

/* 觸發鈕：藥丸形、細框、透明底——四個站的導覽列底色都不同，透明底才不會
   在每個站各自「補一塊色」，也讓它在深淺兩種主題下都成立。 */
.nsl-acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--nsl-line); background: transparent;
  color: var(--nsl-fg); font: inherit; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; max-width: 220px; min-width: 0; min-height: 38px;
  transition: border-color 0.15s ease;
}
.nsl-acct-btn:hover { border-color: var(--nsl-line-strong); }
.nsl-acct-btn:focus-visible { outline: 2px solid var(--nsl-line-strong); outline-offset: 2px; }

.nsl-acct-avatar {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #eda100, #eb6834);   /* 品牌漸層＝有名字時的頭像底 */
}
.nsl-acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* 未登入：人像圖示不需要底色塊，避免看起來像「已經有帳號」 */
.nsl-acct-avatar.is-empty { background: none; color: currentColor; }

/* 名字可能很長。要讓 ellipsis 真的生效，整條 flex 祖先鏈都要 min-width: 0——
   flex 項目的預設最小寬度是內容寬度，少了這行，長名字會把整顆鈕撐出版面
   （實測導覽列在 1100px 寬時整列溢出）。 */
.nsl-acct-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nsl-acct-caret {
  flex: none; opacity: 0.7; transition: transform 0.15s ease;
}
.nsl-acct-btn[aria-expanded="true"] .nsl-acct-caret { transform: rotate(180deg); }

/* 面板：圓角、細框、貼齊右緣。寬度給到 260–320px——比選項文字略寬，
   才不會讓「升級 Pro 方案」這種較長的項目擠成兩行。 */
.nsl-acct-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  /* min-width 而非 width：內容多的站（主站的登入面板有三顆供應商按鈕與條款行）
     可以長到 320px，內容少的站維持 260px。寫死 width 的話兩邊都得將就。
     min-width 刻意**不用百分比**：百分比參照的是定位錨點，而各站的錨點寬度不一
     （Learning Center 的是被拉寬的 header 容器），而依 CSS 規範 min-width 會蓋過
     max-width——實測那裡的面板因此長到 473px，遠超過 320 的上限。 */
  min-width: 260px; max-width: min(320px, 88vw); width: max-content;
  background: var(--nsl-panel-bg); border: 1px solid var(--nsl-line);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.nsl-acct-panel[hidden] { display: none; }

.nsl-acct-head {
  padding: 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--nsl-line);
}
.nsl-acct-name {
  font-weight: 700; font-size: 0.9375rem; color: var(--nsl-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsl-acct-email {
  font-size: 0.75rem; color: var(--nsl-fg-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nsl-acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--nsl-fg);
  font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
  min-height: 44px;                       /* 觸控目標下限 */
}
.nsl-acct-item:hover, .nsl-acct-item:focus-visible { background: var(--nsl-hover); }
.nsl-acct-item.is-danger { color: #e06666; }
.nsl-acct-icon { width: 1.25em; text-align: center; flex: none; }

/* 行動版變體：觸發鈕撐滿、面板不浮動而是接在下面（抽屜式導覽列用）。
   手機上把面板做成絕對定位的浮層，會壓在其他選單上、也構不到底部。 */
.nsl-acct.is-block { display: block; width: 100%; }
.nsl-acct.is-block .nsl-acct-btn {
  width: 100%; max-width: none; justify-content: flex-start; border-radius: 12px;
}
.nsl-acct.is-block .nsl-acct-panel {
  position: static; width: 100%; min-width: 0; max-width: none;
  margin-top: 8px; box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .nsl-acct-btn, .nsl-acct-caret { transition: none; }
}