/* Account: sign-in sheet (js/ui/auth-dialog.js) and the account card /
   sync banner (js/ui/account-panel.js). Builds on dialog.css. */

.auth-tabs { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--purple); box-shadow: 0 1px 4px rgba(60,30,140,.15); }

.google-slot { min-height: 44px; display: flex; justify-content: center; }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.pw-row { display: flex; gap: var(--s2); }
.pw-row input { flex: 1; min-width: 0; }
.pw-toggle { border: 0; background: var(--lilac-50); color: var(--purple); font-weight: 700; font-size: 13px; border-radius: var(--r-sm); padding: 0 12px; }
.field input[dir="ltr"] { text-align: left; }

.auth-switch { margin: 0; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.auth-switch .link { padding: 0 4px; }

.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover;
  display: grid; place-items: center; background: var(--purple); color: #fff; font-weight: 800; font-size: 20px;
}
.avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.icon-btn.signed-in { padding: 0; }

.account-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s4); display: grid; gap: var(--s3); }
.account-card.signed-out { background: linear-gradient(135deg, #EFE6FF, var(--lilac-50)); box-shadow: inset 0 0 0 1.5px var(--lilac); }
.account-card .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.account-card .who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.account-card .who b { font-size: 16.5px; }
.account-card .who span { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.account-card .who small { font-size: 12px; color: var(--ink-3); }
.account-card .sync { margin: 0; font-size: 13px; font-weight: 700; color: var(--mint-700); }
.account-card .sync.err { color: var(--danger); }
.item .t small { display: block; font-weight: 500; color: var(--ink-2); font-size: 12.5px; }

.sync-banner { margin: 0; font-size: 13px; color: var(--ink-2); background: var(--surface); border-radius: var(--r-sm); padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.sync-banner.ok { color: var(--mint-700); font-weight: 700; background: var(--mint-50); box-shadow: none; }
.sync-banner .link { padding: 0 4px; font-size: 13px; }