/* Account: topbar button, settings card, sign-in and "which copy?" dialogs. */
.account-btn { position: relative; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.account-btn .sync-dot { position: absolute; top: 5px; right: 5px; box-shadow: 0 0 0 2px var(--surface); }
[data-sync="guest"] .sync-dot { display: none; }
[data-sync="synced"] .sync-dot { background: var(--ok); }
[data-sync="pending"] .sync-dot, [data-sync="syncing"] .sync-dot { background: var(--warn); }
[data-sync="syncing"] .sync-dot { animation: sync-blink 1s ease-in-out infinite; }
[data-sync="conflict"] .sync-dot, [data-sync="error"] .sync-dot { background: var(--bad); }
@keyframes sync-blink { 50% { opacity: .35; } }
:root[data-motion="reduce"] [data-sync="syncing"] .sync-dot { animation: none; }

.account-card { display: grid; gap: 12px; }
.account-card .card-head { margin-bottom: 0; }
.account-card .account-delete { margin-left: auto; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.sync-line { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sync-line[data-sync="conflict"], .sync-line[data-sync="error"] { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }

.auth-form { display: grid; gap: 14px; }
.auth-form .seg { justify-self: start; }
.sync-choice { display: grid; gap: 12px; }
.sync-choice .choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; text-align: left; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.sync-choice .choice:hover { border-color: var(--brand-3); box-shadow: var(--shadow-sm); }
.sync-choice .choice .i { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); flex: none; }
.sync-choice .choice span { display: grid; gap: 3px; }
.sync-choice .choice small { color: var(--ink-3); font-size: 12px; line-height: 1.45; }
@media (max-width: 720px) { .account-card .account-delete { margin-left: 0; } }