/* ==========================================================================
   account.css: the header avatar menu, the save nudge and the sign-in sheet
   (public/app/account.js). Eli's tokens only; nothing here overrides a shared
   class outside .acct-* / .am-* / .an-*.
   ========================================================================== */

/* A small ring on the header avatar once this browser is an account. */
.hd-avatar.is-signed-in::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--page-deep, #0B0B0E);
}

/* ---- the avatar menu ----------------------------------------------------- */
.acct-menu {
  position: absolute; z-index: 45; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(var(--mode-rgb), .08);
  animation: acct-drop .16s ease-out both;
}
.acct-menu[hidden] { display: none; }
@keyframes acct-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.am-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-4); margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
}
.am-who { min-width: 0; }
.am-name { font: 700 var(--fs-md)/1.2 var(--font-ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-status {
  margin-top: 3px; color: var(--text-2);
  font: 500 var(--fs-xs)/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase;
}
.am-status.is-on { color: var(--good); }
.am-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px;
  padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text); text-decoration: none; text-align: left; cursor: pointer;
  font: 600 var(--fs-base)/1 var(--font-ui);
}
.am-item .i { width: 18px; height: 18px; color: var(--text-2); flex: 0 0 18px; }
.am-item:hover, .am-item:focus-visible { background: var(--surface-2); }
.am-item.is-cta { color: var(--mode-primary); }
.am-item.is-cta .i { color: var(--mode-primary); }

/* ---- the save nudge ---------------------------------------------------------- */
.acct-nudge {
  position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 32px)); transform: translate(-50%, 24px); opacity: 0;
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--mode-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--mode-glow);
  transition: transform .25s ease-out, opacity .25s ease-out;
}
.acct-nudge.is-in { transform: translate(-50%, 0); opacity: 1; }
.an-body { flex: 1; min-width: 0; }
.an-title { font: 800 var(--fs-md)/1.2 var(--font-ui); color: var(--text); }
.an-text { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
.an-acts { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 0 0 auto; }
.an-save { min-height: 44px; padding: 8px 22px; }
.an-later { justify-content: center; font-size: var(--fs-sm); }
body.has-dock .acct-nudge { bottom: calc(var(--dock-chip-h, 56px) + 18px + env(safe-area-inset-bottom)); }
@media (max-width: 520px) {
  .acct-nudge { flex-direction: column; align-items: stretch; gap: var(--s-3); padding: var(--s-4); }
  .an-acts { flex-direction: row; }
  .an-save { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-menu { animation: none; }
  .acct-nudge { transition: none; }
}

/* ---- sign-in / save sheets ------------------------------------------------------ */
.acct-sheet { display: flex; flex-direction: column; gap: var(--s-3); }
.acct-h { margin: 0; font: 800 var(--fs-xl, 24px)/1.15 var(--font-ui); color: var(--text); }
.acct-p { margin: 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.5; }
.acct-p a { color: var(--mode-primary); }
.acct-google { display: flex; justify-content: center; min-height: 44px; }
.acct-google[hidden] { display: none; }
.acct-msg { margin: 0; min-height: 1.2em; color: var(--text-2); font-size: var(--fs-sm); }
.acct-msg:empty { min-height: 0; }
.acct-msg.is-bad { color: var(--bad); }
.acct-fine { margin: 0; color: var(--text-2); font-size: var(--fs-sm); text-align: center; }
.acct-code summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); padding: var(--s-2) 0; }
.acct-code summary:hover { color: var(--text); }
.acct-code-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.acct-code-row .input { flex: 1; min-width: 0; font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.acct-later { align-self: center; }

/* The avatar is a link; its initial should not carry a link underline. */
.hd-avatar, .hd-avatar:hover { text-decoration: none; }