/* Login gate + "last seen" chip for the live layer. Uses the site's own tokens. */
.sync-gate {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 15% 10%, color-mix(in srgb, var(--blush) 22%, transparent), transparent 60%),
    radial-gradient(800px 500px at 90% 95%, color-mix(in srgb, var(--lilac) 18%, transparent), transparent 60%),
    var(--ground);
  color: var(--ink); font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
}
.sync-box { width: min(340px, 100%); text-align: center; display: flex; flex-direction: column; gap: 14px; }
.sync-title { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(30px, 8vw, 40px); letter-spacing: -.01em; }
.sync-sub { margin: 0; color: var(--ink-2); font-size: 15px; }
.sync-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sync-chip {
  font: inherit; font-weight: 700; padding: 12px 10px; border-radius: 14px; cursor: pointer; color: var(--ink-2);
  background: var(--panel); border: 2px solid var(--line); transition: border-color .15s, transform .15s, color .15s;
}
.sync-chip.on { border-color: var(--blush); color: var(--ink); background: var(--panel-2); }
.sync-chip:active { transform: scale(.98); }
.sync-input {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */ padding: 13px 14px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--panel); color: var(--ink); text-align: center; width: 100%;
}
.sync-input:focus { outline: none; border-color: var(--blush); }
.sync-go {
  font: inherit; font-weight: 800; padding: 13px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blush); color: #2a1520; transition: transform .15s, filter .15s;
}
.sync-go:hover { filter: brightness(1.04); transform: translateY(-1px); }
.sync-go:disabled { opacity: .6; cursor: default; transform: none; }
.sync-err { margin: 0; min-height: 1.3em; color: #b4335c; font-size: 14px; }
:root[data-theme="dark"] .sync-err { color: #ff9dbe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sync-err { color: #ff9dbe; } }
.sync-offline { font: inherit; font-size: 13px; color: var(--ink-3); background: none; border: 0; text-decoration: underline; cursor: pointer; }

.sync-pill {
  position: fixed; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; pointer-events: none; opacity: .88;
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sync-pill.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--grass); vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .sync-pill.live::before { animation: syncPulse 2.4s ease-in-out infinite; } }
@keyframes syncPulse { 50% { opacity: .35; } }