/* FlumeSight cloud (L-C2a): sync status chip, sign-in screen, Sync panel. Tokens from styles.css only. */

/* ---------- sync status chip (fills the topbar slot #syncStatus) ---------- */
#syncStatus{display:flex;align-items:center;flex:none;min-width:0}
#syncStatus:empty{display:none}
.sync-chip{display:inline-flex;align-items:center;gap:7px;max-width:320px;min-height:32px;padding:4px 11px;border:1px solid var(--line);border-radius:99px;
  background:var(--card);color:var(--ink-2);font:inherit;font-size:max(var(--tmin),.78rem);font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sync-chip:hover{border-color:var(--line-d);color:var(--ink)}
.sync-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sync-long{overflow:hidden;text-overflow:ellipsis}
.sync-short{display:none}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:none}
.sync-synced .sync-dot{background:var(--good)}
.sync-syncing .sync-dot{background:var(--sky);animation:syncPulse 1s ease-in-out infinite}
.sync-waiting .sync-dot{background:var(--info)}
.sync-offline{background:var(--bg)}
.sync-offline .sync-dot{background:var(--ink-3)}
.sync-chip.sync-problem,.sync-chip.sync-auth{border-color:var(--crit);color:var(--crit);background:var(--crit-bg)}
.sync-problem .sync-dot,.sync-auth .sync-dot{background:var(--crit)}
.sync-signin{color:var(--blue);border-color:var(--line-d)}
@keyframes syncPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sync-syncing .sync-dot{animation:none}}
@media (pointer:coarse){.sync-chip{min-height:44px;padding:4px 14px}}
@media (max-width:767px){
  .sync-long{display:none}
  .sync-short{display:inline}
  .sync-chip{max-width:150px;font-size:max(12px,.78rem)}
}

/* ---------- sign-in screen ---------- */
.cloud-gate{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700))}
.cg-card{width:100%;max-width:400px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px 26px 22px;animation:modalIn .2s ease-out}
.cg-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.cg-word{font-weight:800;letter-spacing:.06em;color:var(--navy-900);font-size:1.05rem}
.cg-word em{font-style:normal;color:var(--sky)}
.cg-title{margin:0 0 6px;font-size:1.3rem;color:var(--ink)}
.cg-sub{margin:0 0 18px;color:var(--ink-3);font-size:.9rem;line-height:1.45}
.cg-form{display:flex;flex-direction:column}
.cg-label{font-size:.8rem;font-weight:700;color:var(--ink-2);margin:0 0 5px}
.cg-input{font:inherit;font-size:16px;min-height:44px;padding:9px 12px;border:1px solid var(--line-d);border-radius:var(--radius-s);margin-bottom:12px;color:var(--ink);background:#fff}
.cg-input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.cg-msg{min-height:1.2em;margin:-2px 0 10px;font-size:.84rem;color:var(--crit)}
.cg-msg:empty{min-height:0;margin:0}
.cg-wide{width:100%;justify-content:center;min-height:44px;font-size:.92rem}
.cg-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-s);background:var(--bg);color:var(--ink-2);font-size:.84rem;line-height:1.45}
.cg-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--ink-4);font-size:.8rem}
.cg-or::before,.cg-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cg-fine{margin:10px 0 0;color:var(--ink-3);font-size:max(12px,.78rem);line-height:1.4;text-align:center}
.cg-card [hidden]{display:none!important}
#cgDiscard{margin-bottom:10px}

/* ---------- settings in cloud mode: restore and reset are off ---------- */
.btn.is-disabled{opacity:.5;cursor:not-allowed}
label.btn.is-disabled{pointer-events:none}
.cloud-off-note{margin-top:-4px}

/* ---------- loading the venue (first sign-in on a device) ---------- */
.cloud-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40vh;color:var(--ink-3);font-weight:600}
.cloud-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-d);border-top-color:var(--blue);animation:cloudSpin .8s linear infinite}
@keyframes cloudSpin{to{transform:rotate(360deg)}}

/* ---------- Sync panel ---------- */
.sync-panel-wrap{position:fixed;inset:0;z-index:250;background:rgba(11,31,58,.5);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.sync-panel{width:100%;max-width:520px;max-height:min(90vh,720px);display:flex;flex-direction:column;background:var(--card);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .18s ease-out}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px 20px;border-bottom:1px solid var(--line)}
.sp-head h2{margin:0;font-size:1.05rem;color:var(--ink)}
.sp-close{width:44px;height:44px;border:none;background:none;border-radius:10px;font-size:1.5rem;line-height:1;color:var(--ink-3);cursor:pointer}
.sp-close:hover{background:var(--bg);color:var(--ink)}
.sp-body{padding:14px 20px;overflow-y:auto;flex:1;min-height:0}
.sp-status{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink);margin-bottom:10px}
.sp-status.sync-problem,.sp-status.sync-auth{color:var(--crit)}
.sp-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-size:.86rem}
.sp-facts dt{color:var(--ink-3)}
.sp-facts dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.sp-h3{margin:14px 0 8px;font-size:.84rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.sp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sp-list li{border:1px solid var(--line);border-radius:var(--radius-s);padding:9px 11px;font-size:.86rem}
.sp-list li.is-failed{border-color:var(--crit);background:var(--crit-bg)}
.sp-row{display:flex;flex-direction:column;gap:3px}
.sp-what{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.sp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sp-muted{color:var(--ink-3);font-size:.86rem}
.sp-warn{color:var(--high);font-size:.84rem}
.sp-bad{color:var(--crit);font-size:.84rem;overflow-wrap:anywhere}
.sp-note{color:var(--ink-2);font-size:.82rem}
.sp-foot{display:flex;justify-content:space-between;gap:10px;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (pointer:coarse){.sp-foot .btn,.sp-acts .btn{min-height:44px}}
@media (max-width:767px){
  .sync-panel-wrap{align-items:flex-end;padding:0}
  .sync-panel{max-width:none;max-height:calc(100% - env(safe-area-inset-top) - 24px);border-radius:16px 16px 0 0}
}