/* account.css — the header account area: "Sign in with Google" (free mode) and, when signed in,
   the avatar + first-name pill with a sync-status dot that opens the account menu popover. */

/* ---------- Signed-in pill ---------- */
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-2) 0 var(--space-1);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}

.account-btn:hover,
.account-btn[aria-expanded="true"] {
  background: var(--hover);
  border-color: var(--border);
}

.account-btn .icon--chevron-down {
  color: var(--muted);
}

.account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Avatar ---------- */
.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tray);
  flex-shrink: 0;
}

.account-avatar--initials {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

/* ---------- Sync status dot ---------- */
.account-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray);
  box-shadow: 0 0 0 2px var(--surface);
  flex-shrink: 0;
}

.account-dot--synced {
  background: var(--green);
}

.account-dot--syncing {
  background: var(--yellow);
  animation: account-pulse 1.2s ease-in-out infinite;
}

.account-dot--offline {
  background: var(--gray);
}

.account-dot--error {
  background: var(--red);
}

@keyframes account-pulse {
  50% {
    opacity: 0.35;
  }
}

/* ---------- Account menu (popover) ---------- */
.popover--account {
  min-width: 250px;
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.account-menu__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-3);
}

.account-menu__header .account-avatar {
  width: 36px;
  height: 36px;
  font-size: var(--text-md);
}

.account-menu__who {
  min-width: 0;
}

.account-menu__name,
.account-menu__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__name {
  font-weight: 700;
}

.account-menu__email {
  font-size: var(--text-xs);
  color: var(--muted);
}

.account-menu__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}

.popover--account .menu {
  min-width: 0;
  padding: var(--space-1) 0 0;
}

/* ---------- Touch & narrow screens ---------- */
@media (pointer: coarse) {
  .account-btn {
    min-height: var(--touch);
  }
}

@media (max-width: 479px) {
  .account-name {
    display: none;
  }

  /* The Google button keeps only its "G" so the product name fits next to it; the label stays
     in the accessibility tree. */
  .btn-google {
    width: var(--touch);
    padding: 0;
  }

  .btn-google__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-dot--syncing {
    animation: none;
  }
}

/* ---------- Sign-in chooser (rough placeholder: Google works; Apple + email land later) ---------- */
.signin {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 300px;
  max-width: 100%;
  text-align: center;
}

/* The sign-in chooser is centred throughout — title, subtitle and Cancel. Both selectors so it
 * works whether or not the page's JS is fresh (:has needs only the .signin markup). */
.modal:has(.signin) .modal__title,
.modal--signin .modal__title {
  text-align: center;
}

.modal:has(.signin) .modal__actions,
.modal--signin .modal__actions {
  justify-content: center;
}

.signin__subtitle {
  margin: 0;
  font-size: var(--text-sm);
}

.signin-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}

.signin-option:hover {
  background: var(--hover);
}

.signin-option--apple {
  background: #000;
  color: #fff;
  border-color: #000;
}

.signin-option--apple:hover {
  background: #1a1a1a;
}

.signin__sep {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
}

.signin__sep::before,
.signin__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.signin__email {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}