/* The sync panel of the C4 Passport: what this device holds that the service does not yet. */
.c4-sync{position:fixed;left:16px;right:16px;bottom:calc(var(--c4-bottom-inset,0px) + 16px);z-index:60;max-width:420px;margin-left:auto;border:1px solid var(--line,#d9dee7);border-radius:16px;background:var(--bg,#fff);color:var(--text,#111);box-shadow:0 12px 40px rgba(0,0,0,.14);font-size:14px;line-height:1.5}
.c4-sync[hidden]{display:none}
.c4-sync-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer;border-radius:16px}
.c4-sync-head:focus-visible{outline:2px solid var(--brand,#1f5f99);outline-offset:2px}
.c4-sync-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#328261;box-shadow:0 0 0 4px color-mix(in srgb,#328261 18%,transparent)}
.c4-sync-pending .c4-sync-dot{background:#987531;box-shadow:0 0 0 4px color-mix(in srgb,#987531 18%,transparent);animation:c4-sync-pulse 1.4s ease-in-out infinite}
.c4-sync-offline .c4-sync-dot{background:#6b7280;box-shadow:0 0 0 4px color-mix(in srgb,#6b7280 18%,transparent)}
.c4-sync-refused .c4-sync-dot{background:#c75d5d;box-shadow:0 0 0 4px color-mix(in srgb,#c75d5d 18%,transparent)}
@keyframes c4-sync-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.c4-sync-body{display:none;padding:0 16px 14px;border-top:1px solid var(--line,#d9dee7)}
.c4-sync-open .c4-sync-body{display:block}
.c4-sync-body p{margin:10px 0}
.c4-sync-dead{margin:8px 0;padding:0 0 0 18px;max-height:160px;overflow:auto}
.c4-sync-dead li{margin:0 0 8px;overflow-wrap:anywhere}
.c4-sync-actions{display:flex;flex-wrap:wrap;gap:8px}
.c4-sync-actions button{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:50px;border:1px solid var(--line,#d9dee7);background:var(--tint,#f3f5f9);color:inherit;cursor:pointer}
.c4-sync-actions button:hover{filter:brightness(.97)}
.c4-sync-actions .c4-sync-danger{border-color:#c75d5d;color:#c75d5d}
@media (max-width:640px){.c4-sync{left:8px;right:8px;bottom:calc(var(--c4-bottom-inset,0px) + 8px);max-width:none}}
@media print{.c4-sync{display:none}}
/* On a phone (founder, 27 October 2026): the strip is its dot alone, at the bottom left above the bar; a tap opens the
   full strip, a tap on its head folds it back to the dot. The dot keeps the state's colour. */
@media (max-width:760px){
  .c4-sync{left:12px;right:auto;bottom:calc(var(--c4-bottom-inset,0px) + 12px);width:44px;height:44px;max-width:none;border-radius:999px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.16)}
  .c4-sync .c4-sync-head{width:44px;height:44px;padding:0;justify-content:center;border-radius:999px}
  .c4-sync .c4-sync-head>span:not(.c4-sync-dot){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .c4-sync.c4-sync-open{left:8px;right:8px;width:auto;height:auto;border-radius:16px;overflow:visible;box-shadow:0 12px 40px rgba(0,0,0,.14)}
  .c4-sync.c4-sync-open .c4-sync-head{width:100%;height:auto;padding:12px 16px;justify-content:flex-start;border-radius:16px}
  .c4-sync.c4-sync-open .c4-sync-head>span:not(.c4-sync-dot){position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}
/* The open strip carries a close at its top right (founder, 27 October 2026), so a tap folds it back without guessing. */
.c4-sync{position:fixed}
.c4-sync.c4-sync-open{z-index:120}
.c4-sync-close{display:none}
.c4-sync.c4-sync-open .c4-sync-close{display:grid;place-items:center;position:absolute;top:8px;right:8px;width:36px;height:36px;padding:0;border:1px solid var(--line,#d9dee7);border-radius:50%;background:var(--surface-raised,#fff);color:var(--text,#111);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.c4-sync.c4-sync-open .c4-sync-close:hover{background:var(--tint,#f3f5f9)}
.c4-sync.c4-sync-open .c4-sync-close:focus-visible{outline:2px solid var(--brand,#1f5f99);outline-offset:2px}
.c4-sync.c4-sync-open .c4-sync-head{padding-right:56px}