/* Signed-in email — pill with trailing ellipsis so long addresses never wrap. */
.cfg-email-pill{
  display:block; max-width:100%; box-sizing:border-box;
  margin-bottom:10px; padding:5px 12px;
  background:var(--sur2,rgba(255,255,255,.05)); border:1px solid var(--bd,rgba(255,255,255,.1));
  border-radius:var(--r-pill); color:var(--tx); font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Cloud sync: auth gate + status chip ─────────────────────────────────── */
#auth-gate{
  position:fixed; inset:0; z-index:99999;
  background:#0D0C0F;
  display:flex; align-items:safe center; justify-content:center;
  padding:24px;
  overflow-y:auto;   /* a tall card scrolls instead of clipping the logo / Google button */
  transition:opacity .3s ease;
}
/* Ink-swoosh backdrop — flat brush strokes (blue lead + rose/lime/gold pops),
   matching the landing page instead of a gradient, with a slow drift so the
   sign-in screen feels alive. Inset past the edges + scaled so the drift never
   reveals a seam. */
#auth-gate::before{
  content:''; position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:center/cover no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900'><path d='M-40 230 C 300 130 700 130 980 220 C 1110 262 1180 250 1280 208' fill='none' stroke='%234D88E8' stroke-width='52' stroke-linecap='round' opacity='0.16'/><path d='M-60 690 C 240 770 620 770 900 690' fill='none' stroke='%23E05572' stroke-width='32' stroke-linecap='round' opacity='0.12'/><path d='M980 430 C 1080 410 1152 462 1182 556' fill='none' stroke='%23D4A83C' stroke-width='24' stroke-linecap='round' opacity='0.15'/><path d='M30 470 C 180 430 360 442 486 506' fill='none' stroke='%235DC27A' stroke-width='22' stroke-linecap='round' opacity='0.13'/><circle cx='1050' cy='700' r='72' fill='%2346B5A6' opacity='0.12'/><circle cx='150' cy='150' r='42' fill='%23E05572' opacity='0.12'/></svg>");
  animation:ag-drift 20s ease-in-out infinite alternate;
}
@keyframes ag-drift{ from{transform:translate3d(0,0,0) scale(1.03)} to{transform:translate3d(-26px,16px,0) scale(1.07)} }
@media (prefers-reduced-motion:reduce){ #auth-gate::before{ animation:none } }
#auth-gate .ag-card{ position:relative; z-index:1; }
#auth-gate.ag-dismiss{ opacity:0; pointer-events:none; }

/* Loading cover (post-login, while the workspace pulls + renders) */
#auth-gate .ag-loading{ display:flex; align-items:center; justify-content:center; gap:10px; color:#8a8276; font-size:14px; margin-top:6px; }
#auth-gate .ag-spin{ width:16px; height:16px; border:2px solid #2a2620; border-top-color:#4D88E8; border-radius:50%; animation:ag-spin .7s linear infinite; }
@keyframes ag-spin{ to{ transform:rotate(360deg); } }
#auth-gate .ag-quote{ margin:22px auto 0; max-width:300px; color:#6f685d; font-size:12px; font-style:italic; line-height:1.65; text-align:center; animation:ag-quote-in .5s ease both; }
@keyframes ag-quote-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Password strength meter + requirement checklist (sign-up) */
#auth-gate .ag-strength{ text-align:left; margin:-2px 0 0; }
#auth-gate .ag-strbar{ height:5px; border-radius:var(--r-xs); background:#2a2620; overflow:hidden; }
#auth-gate .ag-strbar span{ display:block; height:100%; width:0; background:#cf6b52; border-radius:var(--r-xs); transition:width var(--t-slow) ease, background var(--t-slow) ease; }
#auth-gate .ag-strlbl{ font-size:11px; margin-top:5px; min-height:13px; color:#8a8276; }
#auth-gate .ag-reqs{ list-style:none; padding:0; margin:7px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
#auth-gate .ag-reqs li{ font-size:11px; color:#6f685d; position:relative; padding-left:16px; transition:color var(--t-med); }
#auth-gate .ag-reqs li::before{ content:'○'; position:absolute; left:0; color:#5a544a; }
#auth-gate .ag-reqs li.met{ color:#9fbf99; }
#auth-gate .ag-reqs li.met::before{ content:'✓'; color:#5e8c5a; }
#auth-gate .ag-card{ width:340px; max-width:100%; text-align:center; }
#auth-gate .ag-logo{
  font-family:Cormorant,Georgia,serif; font-weight:600; font-size:52px;
  color:#E2DCD4; line-height:1; margin-bottom:10px; letter-spacing:.01em;
}
#auth-gate .ag-logo span{ color:#4D88E8; }
#auth-gate .ag-sub{ color:#8a8276; font-size:14px; margin-bottom:24px; }
#auth-gate form{ display:flex; flex-direction:column; gap:10px; }
#auth-gate input{
  background:#161310; border:1px solid #2a2620; border-radius:var(--r-lg);
  color:#E4DDD0; font-size:15px; padding:12px 14px; outline:none;
}
#auth-gate input:focus{ border-color:#4D88E8; }
#auth-gate .ag-err{ color:#cf6b52; font-size:13px; min-height:16px; text-align:left; }
#auth-gate .ag-err.ag-ok{ color:#7fae79; }
#auth-gate .ag-btn{
  background:#4D88E8; color:#06122a; border:none; border-radius:var(--r-lg);
  font-size:15px; font-weight:600; padding:12px; cursor:pointer; margin-top:2px;
}
#auth-gate .ag-btn:disabled{ opacity:.6; cursor:default; }

/* Social sign-in buttons + "or" divider */
#auth-gate .ag-social{ display:flex; flex-direction:column; gap:9px; margin-bottom:4px; }
#auth-gate .ag-soc{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:var(--r-lg); font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
#auth-gate .ag-soc svg{ width:18px; height:18px; flex-shrink:0; }
#auth-gate .ag-soc-google{ background:#fff; color:#1f1f1f; }
#auth-gate .ag-soc-google:hover{ background:#ececec; }
#auth-gate .ag-soc-apple{ background:#000; color:#fff; border-color:#2a2620; }
#auth-gate .ag-soc-apple:hover{ border-color:#4a443a; }
#auth-gate .ag-or{ display:flex; align-items:center; gap:10px; color:#6f685d; font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin:6px 0; }
#auth-gate .ag-or::before, #auth-gate .ag-or::after{ content:''; flex:1; height:1px; background:#2a2620; }
#auth-gate .ag-link{
  background:none; border:none; color:#8a8276; font-size:13px;
  cursor:pointer; margin-top:6px;
}
#auth-gate .ag-link:hover{ color:#4D88E8; }

/* Lives inside the topbar's right cluster (.tp-act) so it shares the header's
   alignment on every view instead of floating over it. */
#cloud-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--sur); border:1px solid var(--bd2); border-radius:var(--r-2xl);
  padding:5px 11px; cursor:pointer; user-select:none;
  font-size:12px; color:var(--mu); white-space:nowrap;
  transition:border-color var(--t-fast), color var(--t-fast);
}
#cloud-chip:hover{ border-color:var(--mu); color:var(--tx); }
#cloud-chip .cc-dot{ width:8px; height:8px; border-radius:50%; background:#5e8c5a; }
#cloud-chip[data-state="syncing"] .cc-dot{ animation:cc-pulse 1s ease-in-out infinite; }
@keyframes cc-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

#cloud-menu{
  position:fixed; right:20px; top:46px; z-index:9001;
  background:var(--sur); border:1px solid var(--bd2); border-radius:var(--r-xl);
  padding:6px; min-width:190px;
  box-shadow:var(--elev-2);
}
#cloud-menu .cm-email{ color:var(--mu); font-size:11px; padding:6px 10px 4px; word-break:break-all; }
#cloud-menu .cm-diag{ color:var(--mu); opacity:.85; font-size:10.5px; padding:1px 10px; font-family:var(--fm); }
#cloud-menu .cm-diag b{ color:var(--tx); font-weight:600; }
#cloud-menu .cm-diag:last-of-type{ padding-bottom:8px; border-bottom:1px solid var(--bd); margin-bottom:4px; }
#cloud-menu .cm-it{
  display:block; width:100%; text-align:left;
  background:none; border:none; color:var(--tx); font-size:13px;
  padding:9px 10px; border-radius:var(--r-md); cursor:pointer;
}
#cloud-menu .cm-it:hover{ background:var(--sur2); }