/* spaces.css — an invitee's two vaults in the top bar (spaces.js, 9 Nov 2026). */
.pill.spaces{position:relative;padding:0 4px;gap:0;pointer-events:auto}
.pill.spaces .lite{position:absolute;left:4px;top:4px;bottom:4px;border-radius:999px;background:rgba(245,245,247,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
 transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1)}
.pill.spaces.in-demo .lite{background:rgba(255,214,10,.12);box-shadow:inset 0 0 0 1px rgba(255,214,10,.32)}
.pill.spaces button{position:relative;z-index:1;height:38px;padding:0 15px;border:0;background:none;color:var(--muted);font:500 14px var(--sans);cursor:pointer;border-radius:999px;
 max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s}
.pill.spaces button[aria-pressed="true"]{color:var(--text)}
.pill.demo-tag{gap:9px;padding:0 6px 0 14px;font:600 11px var(--mono);letter-spacing:.16em;color:#ffd60a;pointer-events:auto;border-color:rgba(255,214,10,.3)}
.pill.demo-tag i{width:7px;height:7px;border-radius:50%;background:#ffd60a;box-shadow:0 0 8px #ffd60a}
.pill.demo-tag button{height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--text);font:500 12.5px var(--sans);letter-spacing:0;cursor:pointer}
.spaces-veil{position:fixed;inset:0;z-index:9999;background:#000;opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.spaces-veil.on{opacity:1}
@media (max-width:860px){.pill.spaces button{max-width:140px;padding:0 11px;font-size:13px}.pill.demo-tag{display:none}}

/* a paused vault (9 Nov): the app rests behind a dark glass; the card comes out of a blur; the line of now draws and stops still */
.paused-veil{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.62);
 -webkit-backdrop-filter:blur(14px) saturate(.7);backdrop-filter:blur(14px) saturate(.7);opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.paused-veil.on{opacity:1}
.paused-card{max-width:460px;width:100%;padding:34px 34px 30px;border-radius:24px;background:rgba(28,28,30,.72);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 120px rgba(0,0,0,.6);color:var(--text);font-family:var(--sans);
 opacity:0;filter:blur(14px);transform:translateY(10px) scale(.985);transition:opacity 1s cubic-bezier(.16,1,.3,1) .15s,filter 1.4s cubic-bezier(.22,.8,.2,1) .15s,transform 1.4s cubic-bezier(.16,1,.3,1) .15s}
.paused-veil.on .paused-card{opacity:1;filter:none;transform:none}
.pz-line{display:block;width:180px;height:16px;margin:0 0 22px;overflow:visible}
.pz-line path{fill:none;stroke:rgba(245,245,247,.75);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .7s}
.pz-line circle{fill:#f5f5f7;opacity:0;transition:opacity .9s ease 2.1s;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.paused-veil.on .pz-line path{stroke-dashoffset:0}.paused-veil.on .pz-line circle{opacity:.85}
.paused-card h2{margin:0 0 12px;font:600 26px/1.15 var(--sans);letter-spacing:-.03em}
.paused-card p{margin:0 0 10px;font:400 16px/1.55 var(--sans);color:rgba(245,245,247,.82)}
.paused-card p b{color:var(--text);font-weight:600}
.paused-card .pz-s{color:var(--muted);font-size:14.5px}
.pz-b{display:inline-flex;align-items:center;height:44px;margin-top:14px;padding:0 22px;border-radius:999px;background:#f5f5f7;color:#000;font:600 15px var(--sans);text-decoration:none}
@media (prefers-reduced-motion:reduce){.paused-veil,.paused-card,.pz-line path,.pz-line circle{transition:none}}