/* Person switch (household.js): a round button at the right end of the bar. On click it turns into × and the views
   pop out to the left as round bubbles. The goo filter melts the bubbles of .goo-blobs together while they move;
   the buttons of .goo-labels lie exactly on top and stay sharp. */
.toolbar>.muted{margin-inline-start:auto;transition:opacity .2s}
/* The switch sits in the middle of the bar (bubbles have room to the left); the current view is named on its right */
@media(min-width:761px){.toolbar{position:relative}.toolbar>.person-switch{position:absolute;left:50%;top:50%;transform:translate(-22px,-50%)}html[dir=rtl] .toolbar>.person-switch{left:auto;right:50%;transform:translate(22px,-50%)}}
.person-switch .person-current{order:2}
.toolbar:has(.person-switch[data-open=true])>.muted{opacity:0}
.person-switch{--d:44px;--gap:12px;--dir:-1;position:relative;z-index:6;display:flex;align-items:center;gap:10px;flex-shrink:0}
.person-switch[hidden]{display:none}
.goo-defs{position:absolute;width:0;height:0}
.person-current{font-size:13px;font-weight:600;color:var(--muted);transition:opacity .2s}
.person-switch[data-open=true] .person-current{opacity:0}
.goo-stage{position:relative;width:var(--d);height:var(--d)}
.goo-blobs{position:absolute;inset:0;overflow:visible;pointer-events:none;filter:url(#strippi-goo) drop-shadow(0 6px 14px rgba(20,40,40,.16))}
.goo-blobs .blob,.goo-labels>button{position:absolute;top:0;left:0;width:var(--d);height:var(--d);border-radius:50%;
 transition:transform .62s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;transition-delay:calc(var(--i,0)*45ms)}
.goo-blobs .blob{background:#fff;transform:scale(.6)}
.goo-blobs .blob-main{transform:none;transition-delay:0s}
.person-switch[data-open=true] .blob:not(.blob-main),.person-switch[data-open=true] .person-option{transform:translateX(calc(var(--dir)*var(--i)*(var(--d) + var(--gap))))}
.goo-labels>button{display:grid;place-items:center;min-height:0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink,#1e2a2b);cursor:pointer}
.goo-labels svg{width:20px;height:20px}
.goo-labels svg{width:22px;height:22px}
/* The little figures are alive: the two of the group bob in turn, a single figure nods on hover */
.goo-labels .fig{transform-box:fill-box;transform-origin:50% 100%}
body.motion-enabled .person-main .fig-a{animation:fig-bob 2.6s ease-in-out infinite}
body.motion-enabled .person-main .fig-b{animation:fig-bob 2.6s ease-in-out infinite -1.3s}
body.motion-enabled .person-option:hover .fig,body.motion-enabled .person-option:focus-visible .fig{animation:fig-hop .7s cubic-bezier(.34,1.56,.64,1)}
body.motion-enabled .person-switch[data-open=true] .person-option .fig{animation:fig-hop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.25s + var(--i)*70ms)}
@keyframes fig-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes fig-hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-3px) scale(1.06,.96)}70%{transform:translateY(.5px) scale(.98,1.03)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.goo-labels .fig{animation:none!important}}
.person-option{opacity:0;pointer-events:none;transform:scale(.6)}
.person-switch[data-open=true] .person-option{opacity:1;pointer-events:auto}
.person-option small{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:600;color:var(--muted);opacity:0;transition:opacity .2s .25s}
.person-switch[data-open=true] .person-option small{opacity:1}
.person-option.is-current{color:var(--accent,#13565a)}
.person-option.is-current::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;opacity:.7}
.person-main .pm-open,.person-main .pm-close{grid-area:1/1;display:grid;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.person-main .pm-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.person-switch[data-open=true] .pm-open{opacity:0;transform:rotate(90deg) scale(.6)}
.person-switch[data-open=true] .pm-close{opacity:1;transform:none}
html.night .goo-blobs{filter:url(#strippi-goo) drop-shadow(0 6px 16px rgba(0,0,0,.35))}
html.night .goo-blobs .blob{background:#164a50}
html.night .goo-labels>button{color:var(--n-text)}
html.night .person-option.is-current{color:#f0c66b}
html.night .person-current,html.night .person-option small{color:var(--n-muted)}
html[dir=rtl] .person-switch{--dir:1}html[dir=rtl] .goo-blobs .blob,html[dir=rtl] .goo-labels>button{left:auto;right:0}
@media(prefers-reduced-motion:reduce){.goo-blobs .blob,.goo-labels>button,.person-main span{transition:none}}
.household-people .row-actions{display:flex;gap:8px}
/* Phone: the switch sits at the right end of its row, so the bubbles have room to the left */
@media(max-width:760px){.toolbar>.person-switch{margin-inline-start:auto}}