/* Additions for sync / auth / PWA */
.header-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.header-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.sync-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--border);
  border-radius:100px; padding:5px 12px; cursor:pointer;
  font-family:'Inter',sans-serif;
}
.sync-pill:hover{ border-color:var(--accent-dim); color:var(--text); }
.sync-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); }
.sync-pill[data-status="synced"] .sync-dot{ background:var(--accent); }
.sync-pill[data-status="syncing"] .sync-dot{ background:var(--yellow); animation:pulse 1s infinite; }
.sync-pill[data-status="offline"] .sync-dot{ background:var(--orange); }
.sync-pill[data-status="error"] .sync-dot{ background:var(--red); }
@keyframes pulse{ 50%{ opacity:.3; } }

dialog{
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:14px;
  padding:24px; width:min(380px, 92vw);
}
dialog::backdrop{ background:rgba(0,0,0,.6); }
dialog h2{ font-family:'Space Grotesk',sans-serif; margin:0 0 6px; font-size:20px; }
dialog p{ color:var(--text-dim); font-size:13px; margin:0 0 14px; line-height:1.45; }
dialog form{ display:flex; flex-direction:column; gap:10px; }
dialog input{ width:100%; }
.dialog-row{ display:flex; gap:8px; margin-top:4px; }
.dialog-row button{ flex:1; }
.auth-msg{ font-size:12px; min-height:16px; color:var(--orange); }
.auth-msg.ok{ color:var(--accent); }

@media (max-width:480px){
  .header-right{ align-items:flex-start; }
  .header-actions{ justify-content:flex-start; }
}

/* iOS safe areas when installed to the home screen */
body{ padding-top:max(40px, env(safe-area-inset-top)); padding-bottom:max(80px, env(safe-area-inset-bottom)); }
input[type="text"], input[type="date"], input[type="email"], input[type="password"], select{
  font-size:16px; /* prevents iOS zoom-on-focus */
}
input[type="email"], input[type="password"]{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-family:'Inter',sans-serif; outline:none;
}
input[type="email"]:focus, input[type="password"]:focus{ border-color:var(--accent); }