/* Dusk look (prototypes/home-screen.html). Phone first; safe areas; 44pt touch targets; nothing hover-only. */
:root{
  --app-bg:#2a2340; --app-ink:#f6f1fa; --app-muted:rgba(246,241,250,.64);
  --glass:rgba(30,22,48,.74); --glass-hi:rgba(255,255,255,.1); --line:rgba(255,255,255,.14);
  --accent:#ffb27a; --accent-ink:#2a1405; --danger:#ff8f8f;
  --mat:rgba(32,24,50,.86); --mat-solid:#251c3a; --blur:blur(26px) saturate(1.5);
  --spring:cubic-bezier(.2,1.25,.32,1); --press:cubic-bezier(.3,.7,.4,1);
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom); --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
  --kb:0px; --barh:96px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--app-bg);color:var(--app-ink);overflow:hidden;overscroll-behavior:none}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
input{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;-webkit-touch-callout:none;touch-action:manipulation}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:2px}
[hidden]{display:none!important}
#safe{position:fixed;top:0;height:env(safe-area-inset-top);width:0;visibility:hidden}
#app{position:fixed;inset:0}

/* ---------- room stage ---------- */
#stage{position:absolute;inset:0}
.stage{overflow:hidden;overflow:clip;background:#5e5280;touch-action:none;cursor:grab} /* clip: labels poking past the edge must never make the room scrollable */
.stage.dragging{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.devw{position:absolute;left:0;top:0;z-index:2;width:0;height:0}
.hit{position:absolute;left:-24px;top:-24px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:none}
.hit.wide{left:-38px;top:-26px;width:76px;height:52px;border-radius:18px}
.hit::after{content:"";position:absolute;inset:5px;border-radius:inherit;background:rgba(255,255,255,0);box-shadow:0 0 0 2px rgba(255,255,255,0);transition:background .2s,box-shadow .2s,transform .14s var(--press)}
/* Off devices stay findable: a clear ring marks where to tap (ADR 0005), with a dark halo so it reads on light walls. */
.devw.off .hit::after{box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 0 4px rgba(26,18,42,.3);background:rgba(255,255,255,.12)}
.devw.offline .hit::after{box-shadow:0 0 0 1.5px rgba(255,255,255,.3);background:none}
.devw.focus .hit::after{box-shadow:none;background:none}
@media (hover:hover){ .hit:hover::after{background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(255,255,255,.6)} }
.hit.pressed::after{background:rgba(255,255,255,.26);box-shadow:0 0 0 2px rgba(255,255,255,.85);transform:scale(.86);transition:background .08s,box-shadow .08s,transform .16s var(--press)}
.hit:focus-visible{outline:none}
.hit:focus-visible::after{box-shadow:0 0 0 2px #fff}
.tag{position:absolute;left:0;top:-30px;transform:translate(-50%,-100%) scale(.9);transform-origin:50% 100%;display:flex;align-items:center;gap:6px;white-space:nowrap;height:34px;padding:0 13px 0 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;background:rgba(22,16,36,.88);color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .16s,transform .3s var(--spring)}
.tag::before{content:"";position:absolute;inset:-6px}
.tag svg{width:15px;height:15px;opacity:.8;flex:none}
.tag b{font-weight:650}
.tag span{opacity:.7;font-weight:500}
.devw:has(:focus-visible) .tag,.devw.show .tag{opacity:1;transform:translate(-50%,-100%);pointer-events:auto}
@media (hover:hover){ .devw:hover .tag{opacity:1;transform:translate(-50%,-100%);pointer-events:auto} }
.htemp{position:absolute;left:0;top:-26px;transform:translate(-50%,-100%);padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;color:#4a1d05;background:#ffb27a;box-shadow:0 0 10px rgba(255,140,60,.75);pointer-events:none;display:none}
.devw.heat-on .htemp{display:block}
.devw.heat-on.show .htemp,.devw.heat-on:has(:focus-visible) .htemp{display:none}
.holdring{position:absolute;z-index:6;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;opacity:0}
.holdring.on{opacity:1;animation:ringin .16s var(--spring)} /* there the moment a finger lands, so people see what holding does */
@keyframes ringin{from{transform:scale(.6)}}
.holdring circle{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151;transform:rotate(-90deg);transform-origin:50% 50%}
.holdring.on circle{animation:fillring var(--hold,420ms) cubic-bezier(.35,0,.65,1) forwards}
/* the hold went through: the full ring pops outward and fades, the light bounces */
.holdring.pop{opacity:0;animation:ringpop .4s cubic-bezier(.2,.8,.3,1)}
.holdring.pop circle{stroke-dashoffset:0;fill:rgba(255,255,255,.22)}
@keyframes ringpop{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.hit.popped::after{animation:hitpop .46s var(--spring)}
@keyframes hitpop{0%{transform:scale(.86)}45%{transform:scale(1.2)}100%{transform:none}}
/* selected light (lights 3): a clear ring + glow around it */
.devw.sel{z-index:3}
.devw.sel .hit::after{background:rgba(255,255,255,.14);box-shadow:0 0 0 2.5px #fff,0 0 0 6px rgba(26,18,42,.35),0 0 24px 8px rgba(255,255,255,.42);animation:selon .38s var(--spring)}
@keyframes selon{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
/* "Adjust" pill next to a light (lights 4) */
@keyframes fillring{to{stroke-dashoffset:0}}

/* Recenter: fades in only when the camera is away from the home framing */
.recenter{position:absolute;z-index:6;left:calc(12px + var(--sal));top:calc(10px + var(--sat));height:44px;padding:0 16px 0 12px;display:flex;align-items:center;gap:7px;border-radius:999px;border:1px solid var(--line);background:rgba(28,21,44,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;
  opacity:0;transform:translateY(-6px) scale(.9);pointer-events:none;transition:opacity .22s,transform .4s var(--spring)}
.recenter svg{width:20px;height:20px}
.recenter.on{opacity:1;transform:none;pointer-events:auto}
.recenter:active{transform:scale(.96)}

/* ---------- device sheet ---------- */
.fpanel{position:absolute;z-index:20;right:12px;top:calc(12px + var(--sat));bottom:calc(12px + var(--sab));width:min(320px,42%);opacity:0;transform:translateX(16px);transition:opacity .25s,transform .4s var(--spring);pointer-events:none;display:flex}
.fpanel.open{opacity:1;transform:none;pointer-events:auto}
.narrow .fpanel{left:0;right:0;top:auto;bottom:0;width:auto;display:block;opacity:1;transform:none;transition:none;pointer-events:none}
.narrow .fpanel.open .sheet{pointer-events:auto}
.narrow .fpanel .sheet{transform:translate3d(0,var(--y,110%),0);border-radius:28px 28px 0 0;border-bottom:0;will-change:transform}
.narrow .fpanel.measuring .sheet{visibility:hidden;transform:none;height:auto!important}
.sheet{flex:1;min-height:0;background:var(--mat);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);color:var(--app-ink);border-radius:24px;box-shadow:0 -8px 40px rgba(10,6,20,.4);display:flex;flex-direction:column;cursor:default;overflow:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sheet,.menu,.layouts,.rbar,.bar-g .card{background:var(--mat-solid)} }
.grab{display:none}
.narrow .grab{display:block;flex:none;align-self:center;width:120px;height:22px;margin:0;padding:0;border:0;background:none;cursor:grab;position:relative}
.narrow .grab::after{content:"";position:absolute;left:50%;top:8px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(255,255,255,.34)}
.sh-head{display:flex;align-items:center;gap:10px;padding:14px 10px 8px 20px;flex:none;touch-action:none}
.narrow .sh-head{padding-top:2px}
.sh-head .t{flex:1;min-width:0}
.sh-head b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em}
.sh-head small{color:var(--app-muted);font-size:13.5px;font-weight:500}
.x{width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;flex:none;color:#fff;display:grid;place-items:center;position:relative}
.x::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,.12)}
.x svg{width:16px;height:16px;position:relative;stroke-width:2.6}
.sh-body{flex:1;min-height:0;overflow:hidden;padding:4px 16px calc(18px + var(--sab));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px}
.sheet.at-large .sh-body,.stage:not(.narrow) .sh-body{overflow:auto}
.grp{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--app-muted);margin:8px 4px -4px}
.ctl{margin:0}
.ctl-l{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin:0 4px 8px;color:var(--app-muted)}
.ctl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px;font-weight:600;min-height:56px;padding:0 8px 0 18px;border-radius:18px;background:rgba(255,255,255,.08)}
.ctl-row .val{color:var(--app-muted);font-weight:500}
.foot{font-size:12px;color:var(--app-muted);text-align:center;padding-top:4px}
/* capsule slider (Control Center style) */
.cap{position:relative;height:58px;border-radius:18px;background:rgba(255,255,255,.12);overflow:hidden;touch-action:pan-y;cursor:pointer;transition:transform .2s var(--press);--p:50%}
.cap.active{transform:scale(1.015)}
.cap-fill{position:absolute;inset:0 auto 0 0;width:var(--p);background:rgba(255,255,255,.93)}
.cap.knob .cap-fill{display:none}
.cap-lab{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 18px;font-size:16px;font-weight:600;pointer-events:none}
.cap-lab svg{width:21px;height:21px;flex:none}
.cap-lab .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.cap-lab.light{color:#fff}
.cap-lab.ink{color:#211933;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cap.knob{height:46px;border-radius:16px}
.cap.knob .cap-lab{display:none}
.ctl-l .v{color:var(--app-ink);font-variant-numeric:tabular-nums}
.ctl-l svg{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
.cap-knob{display:none}
.cap.knob .cap-knob{display:block;position:absolute;top:6px;bottom:6px;width:10px;margin-left:-5px;left:clamp(12px,var(--p),calc(100% - 12px));border-radius:4px;background:#fff;box-shadow:0 0 0 1.5px rgba(30,20,40,.3),0 2px 8px rgba(0,0,0,.35)}
.tog{width:51px;height:31px;border-radius:999px;border:0;background:rgba(255,255,255,.2);position:relative;cursor:pointer;flex:none;margin:6px 0;transition:background .2s}
.tog::before{content:"";position:absolute;inset:-7px -4px}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .32s var(--spring)}
.tog[aria-checked="true"]{background:#ff9f5a}
.tog[aria-checked="true"]::after{transform:translateX(20px)}
/* the sheet's power: the whole row is the switch, lit while on */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{min-height:44px;padding:0 15px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.08);cursor:pointer;font-size:14px;font-weight:600;transition:transform .14s var(--press)}
.chips button[aria-pressed="true"]{background:#fff;color:#211933;border-color:#fff}
.step{display:flex;align-items:center;gap:6px}
.step button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);cursor:pointer;font-weight:600;font-size:22px;transition:transform .14s var(--press)}
.step output{min-width:64px;text-align:center;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);margin:0 -2px 10px}
.swatches button{height:46px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;position:relative;transition:transform .14s var(--press)}
.swatches button::before{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:box-shadow .2s}
.swatches button svg{position:relative;width:18px;height:18px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.6);transition:opacity .15s,transform .3s var(--spring);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.swatches button[aria-pressed="true"]::before{box-shadow:0 0 0 3px var(--mat-solid),0 0 0 5px #fff}
.swatches button[aria-pressed="true"] svg{opacity:1;transform:none}
.pad{position:relative;height:104px;border-radius:18px;cursor:crosshair;touch-action:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff),linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.pad i{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.35);pointer-events:none}
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.scenes button{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:14px;padding:8px 10px;text-align:left;cursor:pointer;font-size:13px;font-weight:600;min-height:48px;transition:transform .14s var(--press)}
.scenes button[aria-pressed="true"]{background:#fff;color:#211933;border-color:#fff}
.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px;margin-bottom:10px}
.pieces button{height:44px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.08);padding:0;cursor:pointer}
.pieces button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff}
.note{font-size:12.5px;color:var(--app-muted);margin-top:4px}
.chips button:active,.step button:active,.swatches button:active,.scenes button:active{transform:scale(.94)}

/* ---------- top: person chip + connection ---------- */
.top{position:absolute;z-index:6;top:calc(10px + var(--sat));right:calc(12px + var(--sar));display:flex;gap:8px;align-items:center}
.pill{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(28,21,44,.7);color:#fff;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;transition:transform .14s var(--press)}
.pill:active{transform:scale(.96)}
.pill svg{width:20px;height:20px}
.pill .chev{width:16px;height:16px;opacity:.7;margin-right:-4px;transition:transform .25s var(--spring)}
.pill[aria-expanded="true"] .chev{transform:rotate(180deg)}
.who{padding-left:11px}
.pill.warn{background:#ffb27a;color:#3a1a05;cursor:default;min-height:32px;border:0}
.menu{position:absolute;z-index:40;top:calc(62px + var(--sat));right:calc(12px + var(--sar));width:min(292px,calc(100vw - 24px));padding:6px;border-radius:22px;border:1px solid var(--line);background:var(--mat);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 18px 50px rgba(8,4,18,.5);
  transform-origin:calc(100% - 40px) 0;transform:scale(.85);opacity:0;pointer-events:none;transition:transform .38s var(--spring),opacity .18s}
.menu.on{transform:none;opacity:1;pointer-events:auto}
.menu .mh{padding:10px 12px 8px;display:grid;gap:2px}
.menu .mh b{font-size:15px}
.menu .mh span{font-size:13px;color:var(--app-muted)}
.menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:14px;background:none;font-size:15.5px;font-weight:500;text-align:left;cursor:pointer}
.menu button:active{background:rgba(255,255,255,.1)}
.menu button svg{width:21px;height:21px;opacity:.85}
.menu .danger{color:var(--danger)}
.menu .help{margin:0 10px 8px 45px;font-size:13px;line-height:1.4;color:var(--app-muted)}
.menu .help b{color:var(--app-ink)}
.menu .ver{padding:8px 12px 6px;font-size:12px;color:var(--app-muted);border-top:1px solid var(--line);margin-top:4px}
.layouts{position:absolute;z-index:41;top:calc(8px + var(--sat));left:calc(10px + var(--sal));right:calc(10px + var(--sar));max-width:520px;max-height:calc(100% - 16px - var(--sat) - var(--sab));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;margin:0 auto;padding:12px 12px 14px;border-radius:24px;border:1px solid var(--line);background:var(--mat);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 18px 50px rgba(8,4,18,.5);
  transform:translateY(-16px) scale(.96);opacity:0;pointer-events:none;transition:transform .42s var(--spring),opacity .2s}
.layouts.on{transform:none;opacity:1;pointer-events:auto}
.layouts .lh{display:flex;align-items:center;justify-content:space-between;padding:0 2px 0 6px}
.layouts .lh b{font-size:17px}
.layouts .lh button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:#211933;font-weight:700;cursor:pointer}
.layouts p{margin:2px 6px 8px;font-size:12.5px;color:var(--app-muted)}
.layouts .lg{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--app-muted);margin:8px 6px 6px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#lay-pv{grid-template-columns:1fr 1fr}
.seg button{display:grid;gap:2px;align-content:center;text-align:left;min-height:52px;padding:7px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .14s var(--press),background .2s}
.seg button b{font-size:13.5px}
.seg button small{font-size:11px;line-height:1.25;color:var(--app-muted)}
.seg button[aria-pressed="true"]{background:#fff;color:#211933;border-color:#fff}
.seg button[aria-pressed="true"] small{color:rgba(33,25,51,.7)}
.seg button:active{transform:scale(.96)}

/* ---------- bottom bar: shared ---------- */
.bar{position:absolute;z-index:10;left:0;right:0;bottom:0;pointer-events:none;transform:translateY(calc(-1 * var(--kb)));transition:transform .3s var(--spring),opacity .2s}
.bar-in{position:relative;pointer-events:auto;display:flex;gap:10px;align-items:center;padding:10px calc(14px + var(--sar)) calc(12px + var(--sab)) calc(14px + var(--sal))}
/* scrim behind the bar: darker toward the bottom and toward the right edge, so the row never ends in a hard cut */
.bar-f::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-64px;pointer-events:none;
  background:radial-gradient(90% 85% at 100% 100%,rgba(14,9,26,.5),rgba(14,9,26,0) 75%),linear-gradient(to top,rgba(22,16,36,.92),rgba(22,16,36,.62) 50%,rgba(22,16,36,.25) 78%,rgba(22,16,36,0))}
.mchip{flex:none;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 17px 0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(38,29,58,.88);color:var(--app-ink);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--press),background-color .28s,color .28s,border-color .28s,box-shadow .35s}
.mchip:active{transform:scale(.95)}
.mchip[data-mood][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 0 22px rgba(255,170,110,.35);animation:chipon .42s var(--spring)}
.mchip .dot{width:17px;height:17px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.28);flex:none;transition:box-shadow .28s}
.mchip[data-mood][aria-pressed="true"] .dot{box-shadow:0 0 0 1.5px rgba(42,20,5,.35);animation:doton .5s var(--spring)}
@keyframes chipon{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:none}}
@keyframes doton{0%{transform:scale(.55)}60%{transform:scale(1.18)}100%{transform:none}}
/* a mood's real colors: 1-3 overlapping dots */
.mchip .sw{display:inline-flex;flex:none;align-items:center}
.mchip .sw i{width:14px;height:14px;border-radius:50%;margin-left:-5px;box-shadow:0 0 0 2px rgba(38,29,58,.95)}
.mchip .sw i:first-child{margin-left:0}
.mchip .sw.none{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.mchip[data-mood][aria-pressed="true"] .sw i{box-shadow:0 0 0 1.5px rgba(42,20,5,.5)}
.mchip.tile .sw i{width:18px;height:18px;margin-left:-6px}
.mchip.tile .sw i:first-child{margin-left:0}
.mchip.gall{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);padding-left:13px}
.mchip.gall.icon{padding:0}
.mchip.gall svg{width:18px;height:18px;flex:none}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,154,85,.22)}}
/* power: lit while anything is on; dim "Off" when there is nothing to put back */
[data-power]{cursor:pointer;color:var(--app-ink);transition:transform .16s var(--press),background-color .28s,color .28s,border-color .28s,box-shadow .35s,opacity .2s}
[data-power] svg{width:20px;height:20px;flex:none;stroke-width:2.3}
[data-power] .pl{font-variant-numeric:tabular-nums}
[data-power].on{background:#fff4e8;color:#2a1405;border-color:transparent;box-shadow:0 0 20px rgba(255,214,170,.32)}
[data-power].on svg{color:#e2741f}
[data-power].idle{opacity:.6}
[data-power]:active{transform:scale(.95)}

/* moods a/b: one row: [power] picks that fit (stretched to fill) [All moods] [Ask] */
.picks{flex:1 1 0;min-width:0;display:flex;gap:8px}
.picks .mchip{flex:1 0 auto;max-width:220px;justify-content:center;padding:0 13px 0 10px;gap:6px} /* never narrower than its name */
.picks.measuring .mchip{flex:none;max-width:none}
.picks .mchip .nm{flex:none}
/* chosen moods (Edit bar) all show: tighter chips first, then the colors stacked over the name; never a cut-off name */
.picks.tight{gap:6px}
.picks.tight .mchip{padding:0 10px 0 8px;gap:5px}
.picks.tight .mchip .sw i{width:12px;height:12px;margin-left:-4px}
.picks.stack{gap:4px}
.picks.stack .mchip{flex-direction:column;justify-content:center;gap:3px;padding:0 5px;border-radius:18px;font-size:13px;line-height:1.1}
.picks.stack .mchip .sw i{width:10px;height:10px;margin-left:-3px;box-shadow:0 0 0 1.5px rgba(38,29,58,.95)}
.picks .mchip .sw i:first-child{margin-left:0}
.mchip.icon{width:46px;padding:0;justify-content:center;gap:0}
.mchip.icon svg{width:20px;height:20px}
.bar-in{gap:8px}
/* "Hold to adjust": a quiet label just under a light, for the first few taps */
.hhint{position:absolute;left:0;top:30px;transform:translate(-50%,-4px);padding:4px 10px;border-radius:999px;background:rgba(18,12,30,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:rgba(255,255,255,.88);font-size:12.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .45s var(--spring)}
.hhint.on{opacity:1;transform:translate(-50%,0)}
.devw[data-dev="glide"] .hhint{top:34px}

/* (f) Apple-Home-style status pill, top left */
.statuspill{position:absolute;z-index:6;left:calc(12px + var(--sal));top:calc(10px + var(--sat));min-height:44px;padding:0 15px 0 11px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;border:1px solid var(--line);background:rgba(28,21,44,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14.5px;font-weight:650;
  transition:transform .16s var(--press),background-color .28s,color .28s,border-color .28s,box-shadow .35s,opacity .2s}
.statuspill.on{background:rgba(255,244,232,.94)}
.statuspill.on svg{color:#f08a2c;fill:rgba(255,190,90,.35)}
body[data-bar="f"] .recenter{top:calc(62px + var(--sat))}

/* (g) a card of big tiles; the first row peeks above the bottom edge */
.bar-g .bar-in.card{display:block;margin:0 calc(8px + var(--sar)) 0 calc(8px + var(--sal));padding:0 8px calc(10px + var(--sab));border-radius:28px 28px 0 0;border:1px solid var(--line);border-bottom:0;
  background:rgba(32,24,50,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 -10px 34px rgba(8,4,18,.32);transform:translate3d(0,var(--cy,0px),0);touch-action:none;will-change:transform}
.chead{position:relative;height:50px;display:flex;align-items:center;justify-content:space-between;padding-left:6px}
.ctitle{position:relative;margin-top:6px;font-size:15px;font-weight:700;color:var(--app-muted);pointer-events:none}
.cgrab{position:absolute;inset:0 0 0 0;margin:0;padding:0;border:0;background:none;cursor:pointer}
.cgrab::after{content:"";position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(255,255,255,.32);transition:background .2s}
.card.open .cgrab::after{background:rgba(255,255,255,.5)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mchip.tile{height:78px;width:auto;min-width:0;padding:12px 13px 11px;border-radius:20px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:0;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);font-size:15px;line-height:1.15;white-space:normal}
.mchip.tile .nm{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchip.tile .dot{width:22px;height:22px}
.mchip.tile svg{width:22px;height:22px}
.mchip.tile[data-mood][aria-pressed="true"]{animation:tileon .42s var(--spring)}
@keyframes tileon{0%{transform:scale(.95)}55%{transform:scale(1.03)}100%{transform:none}}
.mchip.tile.ptile .pl{font-weight:700}
.mchip.tile[data-power].on{background:#fff4e8;color:#2a1405;border-color:transparent}
.mchip.tile.later{opacity:var(--cp,0)}
@media (max-width:360px){ .mchip.tile{padding:11px 10px 10px;font-size:14px} }
.card:not(.open) .mchip.tile.later{pointer-events:none}

/* ---------- light drawer: one drawer, two detents (peek = quick controls, full = everything) ---------- */
.bar-in{transition:opacity .2s,translate .26s cubic-bezier(.2,.9,.25,1)}
body.q .bar .bar-in{opacity:0;translate:0 26px;pointer-events:none}
.qbar{position:absolute;z-index:12;left:calc(8px + var(--sal));right:calc(8px + var(--sar));bottom:0;max-width:560px;margin:0 auto;padding:0 14px calc(14px + var(--sab));border-radius:28px 28px 0 0;border:1px solid var(--line);border-bottom:0;
  background:var(--mat);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 -10px 34px rgba(8,4,18,.35);touch-action:none;
  display:none;flex-direction:column;transform:translate3d(0,var(--qy,110%),0);will-change:transform}
.qbar.on{display:flex}
.qbar.closing{pointer-events:none}
.qbar.measuring{height:auto!important}
.qbar *{touch-action:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .qbar{background:var(--mat-solid)} }
.qin{display:flex;flex-direction:column;flex:1;min-height:0}
.qgrab{flex:none;position:relative;width:100%;height:22px;margin:0;padding:0;border:0;background:none;cursor:grab}
.qgrab::after{content:"";position:absolute;left:50%;top:8px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(255,255,255,.34);transition:background .2s,width .2s,margin .2s}
.qbar.at-full .qgrab::after{background:rgba(255,255,255,.5)}
.qh{display:flex;align-items:center;gap:4px;min-height:46px;flex:none;margin-top:-4px}
.qt{flex:1;min-width:0;padding-left:4px}
.qt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt small{color:var(--app-muted);font-size:13.5px;font-weight:500}
.qbody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding-top:6px;overscroll-behavior:contain}
.qbar.at-full .qbody{overflow-y:auto;-webkit-overflow-scrolling:touch}
.qbar.at-full .qbody,.qbar.at-full .qbody *{touch-action:pan-y}
.qbar.at-full .qbody .pad{touch-action:none}
.qpeek{display:flex;flex-direction:column;gap:10px;flex:none}
.qfull{display:flex;flex-direction:column;gap:12px;flex:none;padding-top:2px;opacity:var(--qp,0);transform:translateY(calc((1 - var(--qp,0)) * 14px))}
.qbar:not(.at-full) .qfull{pointer-events:none}
.qfull .grp:first-child{margin-top:0}
.qrow{display:flex;gap:10px;align-items:stretch}
.qrow > .ctl,.qrow > .ctl-row{flex:1;min-width:0}
.qrow > .ctl-row{padding-left:16px;gap:6px}
.qrow .step output{min-width:56px}
@media (max-width:359px){ .qrow > .ctl-row{justify-content:center;padding:0 6px} .qrow > .ctl-row > span:first-child{display:none} }
.qpwr{flex:none;width:58px;height:58px;border-radius:18px;border:0;background:rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer;transition:background-color .25s,color .25s,box-shadow .3s,transform .14s var(--press)}
.qpwr svg{width:26px;height:26px;stroke-width:2.5}
.qpwr[aria-checked="true"]{background:#fff4e8;color:#e2741f;box-shadow:0 0 22px rgba(255,214,170,.3)}
.qpwr:active{transform:scale(.94)}
.swatches.qsw{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));margin:0 -2px}
.qsw button{height:48px}
.qsw button::before{width:38px;height:38px;margin:-19px 0 0 -19px}

/* ---------- mood gallery: Ask on top, then a card per mood; stays open while you try moods ---------- */
.gwrap{position:absolute;inset:0;z-index:35;pointer-events:none}
.gscrim{position:absolute;inset:0;background:rgba(12,8,22,.42);opacity:0;transition:opacity .25s}
.gwrap.on .gscrim{opacity:1;pointer-events:auto}
.gwrap .fpanel{max-width:560px;margin:0 auto}
.gsheet .sh-body{touch-action:pan-y;padding-top:2px;gap:14px}
.gask{flex:none;display:flex;align-items:center;gap:2px;height:50px;padding:0 5px 0 15px;border-radius:25px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .2s,background-color .2s}
.gask:focus-within{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1.5px rgba(255,178,122,.75)}
.gask .gi{display:grid;place-items:center;color:var(--accent)}
.gask .gi svg{width:19px;height:19px}
.gask input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--app-ink);font:inherit;font-size:16px;font-weight:500;padding:0 8px;outline:none}
.gask input::placeholder{color:rgba(246,241,250,.55)}
.gask button{flex:none;width:40px;height:40px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:none;color:#fff;cursor:pointer;touch-action:none;transition:transform .14s var(--press),opacity .2s,background-color .2s}
.gask button svg{width:20px;height:20px}
.gask .gsend{background:var(--accent);color:var(--accent-ink);opacity:.35}
.gask .gsend svg{stroke-width:2.6;width:18px;height:18px}
.gask.typed .gsend{opacity:1}
.gask:has(.gmic):not(.typed) .gsend{display:none}
.gask.typed .gmic{display:none}
.gask .gmic[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);animation:pulse 1s ease-in-out infinite}
.gask button:active{transform:scale(.92)}
.ggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:299px){ .ggrid{grid-template-columns:1fr} }
.gcard{position:relative;display:flex;flex-direction:column;min-width:0;min-height:44px;padding:0;border:0;border-radius:20px;background:rgba(255,255,255,.055);color:var(--app-ink);text-align:left;cursor:pointer;overflow:hidden;
  transition:transform .16s var(--press),background-color .25s}
.gcard::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);pointer-events:none;transition:box-shadow .25s}
.gcard:active{transform:scale(.97)}
.gcard[aria-pressed="true"]{background:rgba(255,178,122,.12)}
.gcard[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 0 transparent}
.gcard.picked{animation:chipon .42s var(--spring)}
.gprev{position:relative;display:block;aspect-ratio:3/2;border-radius:20px 20px 0 0;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,color-mix(in srgb,var(--mc,#4f475f) 42%,#100c19) 0%,color-mix(in srgb,var(--mc,#4f475f) 14%,#100c19) 55%,#100c19 100%)}
.gprev img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease-out}
.gprev.instant img{transition:none}
.gprev.ready img{opacity:1}
.gprev::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(rgba(16,12,25,0),rgba(16,12,25,.35));pointer-events:none}
.gprev:not(.ready)::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 70%) 0 0/200% 100%;animation:shimmer 1.6s linear infinite}
.rm .gprev:not(.ready)::before{animation:none}
@keyframes shimmer{to{background-position:-200% 0}}
.gtx{display:grid;gap:1px;min-width:0;padding:9px 12px 11px}
.gtx b{font-size:15.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtx small{font-size:12.5px;line-height:1.35;color:var(--app-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.7em}
.gck{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.35);opacity:0;transform:scale(.5);transition:opacity .15s,transform .3s var(--spring)}
.gck svg{width:15px;height:15px;stroke-width:3.2}
.gcard[aria-pressed="true"] .gck{opacity:1;transform:none}
/* Edit bar: the sheet chooses the bar's moods. Each card shows its place on the bar (1, 2, ...) or a "+" */
.gedit,.gdone{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:0;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:transform .14s var(--press)}
.gedit{background:rgba(255,255,255,.1);color:var(--app-ink)}
.gdone{background:var(--accent);color:var(--accent-ink);padding:0 20px;margin-right:8px}
.gedit:active,.gdone:active,.gauto:active{transform:scale(.95)}
.gbarhelp{flex:none;display:flex;align-items:center;gap:10px}
.ghint{flex:1;min-width:0;margin:0;font-size:13.5px;line-height:1.35;color:var(--app-muted)}
.gauto{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--accent);font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:transform .14s var(--press),background-color .2s}
.gauto[aria-pressed="true"]{background:rgba(255,178,122,.14);border-color:transparent}
.gnum{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;display:none;place-items:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;background:rgba(16,12,25,.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s var(--spring),background-color .2s}
.gnum svg{width:17px;height:17px;stroke-width:2.6}
.gnum.on{color:var(--accent-ink);background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.35);animation:doton .45s var(--spring)}
.gsheet:not(.editing) .gdone,.gsheet:not(.editing) .gbarhelp,.gsheet.editing .gedit,.gsheet.editing .x,.gsheet.editing .gask,.gsheet.editing .gck,.gsheet.editing .gcard[data-nobar]{display:none}
.gsheet.editing .gnum{display:grid}
/* while the gallery is up, the result bar and the voice overlay sit above it */
body.g-open .rbar{z-index:36;bottom:auto;top:calc(64px + var(--sat))}
.voice{z-index:37}

/* ---------- result bar ---------- */
.rbar{position:absolute;z-index:30;left:calc(12px + var(--sal));right:calc(12px + var(--sar));bottom:calc(var(--barh) + 6px);max-width:520px;margin:0 auto;min-height:50px;
  background:rgba(24,18,40,.9);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);color:#fff;border-radius:18px;padding:3px 3px 3px 16px;display:flex;align-items:center;gap:2px;font-size:14.5px;box-shadow:0 10px 30px rgba(8,4,18,.4);touch-action:none;
  transform:translate3d(var(--dx,0px),calc(var(--dy,0px) + 16px),0) scale(.94);opacity:0;pointer-events:none;transition:transform .5s var(--spring),opacity .2s}
.rbar.on{transform:translate3d(var(--dx,0px),var(--dy,0px),0);opacity:1;pointer-events:auto}
.rbar.drag{transition:none}
.rbar.gone{transition:transform .3s cubic-bezier(.4,0,1,1),opacity .25s}
.rbar .msg{flex:1 1 auto;min-width:0;font-weight:600;line-height:1.3;padding:6px 0}
.rbar button{flex:none;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:14px;background:none;color:var(--accent);font-weight:700;cursor:pointer;transition:transform .14s var(--press)}
.rbar button:active{transform:scale(.94)}
.rbar button.primary{background:var(--accent);color:var(--accent-ink);margin-left:4px}

/* ---------- talk overlays ---------- */
.voice{position:absolute;z-index:31;left:12px;right:12px;bottom:calc(var(--barh) + 12px);background:rgba(18,14,30,.94);color:#fff;border-radius:22px;padding:16px;display:grid;gap:8px;justify-items:center;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .35s var(--spring);pointer-events:none}
.voice.on{opacity:1;transform:none}
.voice .wave{display:flex;gap:4px;align-items:center;height:34px}
.voice .wave i{width:5px;border-radius:3px;background:var(--accent);height:10px;animation:wv .9s ease-in-out infinite}
.voice .wave i:nth-child(2){animation-delay:-.15s}.voice .wave i:nth-child(3){animation-delay:-.3s}.voice .wave i:nth-child(4){animation-delay:-.45s}.voice .wave i:nth-child(5){animation-delay:-.6s}.voice .wave i:nth-child(6){animation-delay:-.75s}
@keyframes wv{50%{height:32px}}
.voice .lbl{font-size:12px;color:rgba(255,255,255,.65)}
.voice .said{font-size:16px;font-weight:600;text-align:center;min-height:1.2em}

/* ---------- setup (not paired yet) ---------- */
.setup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--sat)) 20px calc(24px + var(--sab));background:linear-gradient(#5e5280,#a77f95);overflow:auto}
.setup .card{width:min(100%,420px);background:rgba(24,18,38,.72);border:1px solid var(--line);border-radius:22px;padding:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.setup h1{margin:0 0 8px;font-size:24px}
.setup p{margin:0 0 14px;line-height:1.45;color:var(--app-muted)}
.setup p b{color:var(--app-ink)}
.setup form{display:flex;gap:8px}
.setup input{flex:1;min-width:0;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--glass-hi);color:#fff;padding:0 14px;font:inherit;font-size:20px;letter-spacing:.12em;text-transform:uppercase}
.setup button{height:52px;padding:0 20px;border-radius:14px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:16px;cursor:pointer}
.setup .err{color:#ffc7a8;margin:12px 0 0;min-height:1.2em}
.setup .err:empty{display:none}

/* ---------- people & devices, invites, away access (people.js): one bottom sheet ---------- */
.menu button.two{min-height:56px}
.menu .dl{display:grid;gap:1px;min-width:0}
.menu .dl .dn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .dl small{font-size:12.5px;color:var(--app-muted)}
.mwrap{z-index:38}
.msheet .sh-body{touch-action:pan-y;gap:14px;padding-top:4px}
.msheet .sh-head .bk{margin-left:-12px}
.msheet .sh-head .bk svg{width:20px;height:20px;stroke-width:2.4}
.msheet .grp{margin:2px 4px 8px}
.mform{display:flex;flex-direction:column;gap:16px}
.mlab{display:block}
.mfield{width:100%;height:50px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--app-ink);padding:0 14px;font:inherit;font-size:16px;font-weight:500;outline:none}
.mfield:focus{border-color:rgba(255,178,122,.75);background:rgba(255,255,255,.11)}
.mfield::placeholder{color:rgba(246,241,250,.5)}
.mchips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.mchips button{min-height:46px;padding:0 10px}
.mchips button[aria-checked="true"]{background:#fff;color:#211933;border-color:#fff}
.mnote{margin:6px 4px 0;font-size:13px;line-height:1.4;color:var(--app-muted)}
.mbtn{min-height:48px;padding:0 18px;border-radius:15px;border:0;font-weight:700;font-size:15.5px;cursor:pointer;background:rgba(255,255,255,.12);color:var(--app-ink);transition:transform .14s var(--press),opacity .2s}
.mbtn:active{transform:scale(.96)}
.mbtn:disabled{opacity:.5}
.mbtn.primary{background:var(--accent);color:var(--accent-ink)}
.mbtn.danger{background:rgba(255,143,143,.13);color:var(--danger)}
.mbtn.danger.solid{background:#ff8f8f;color:#3a0b0b}
.mbtn.link{background:none;color:var(--accent);min-height:44px;padding:0 6px;align-self:center}
.mbtn.small{min-height:44px;padding:0 14px;font-size:14px;border-radius:13px;flex:none}
.mrow{display:flex;gap:8px}
.mrow > .mbtn{flex:1}
.merr{margin:0;padding:10px 14px;border-radius:14px;background:rgba(255,143,143,.14);color:#ffc7c7;font-size:14px;font-weight:600}
.mconfirm{padding:14px;border-radius:18px;background:rgba(255,143,143,.1);box-shadow:inset 0 0 0 1px rgba(255,143,143,.35);display:grid;gap:12px}
.mconfirm p{margin:0;font-size:14.5px;line-height:1.4;font-weight:600}
/* the made invite */
.ires{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ires.cancelled{opacity:.45;pointer-events:none}
.ires-h{display:grid;gap:2px}
.ires-h b{font-size:17px}
.ires-h small{color:var(--app-muted);font-size:13px}
.ires-code{font:700 34px/1.1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-align:center;padding:14px 4px;border-radius:16px;background:rgba(10,6,20,.35);color:#fff;-webkit-user-select:all;user-select:all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ires-link{font-size:13px;line-height:1.35;color:var(--accent);word-break:break-all;-webkit-user-select:all;user-select:all;padding:0 2px;min-height:0}
.ires .mnote{margin:0 2px}
/* lists */
.mlist{display:flex;flex-direction:column;border-radius:18px;background:rgba(255,255,255,.06);overflow:hidden}
.mitem{display:flex;align-items:center;gap:12px;min-height:60px;width:100%;padding:8px 10px 8px 14px;border:0;background:none;color:var(--app-ink);text-align:left;font:inherit}
.mitem + .mitem{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
button.mitem{cursor:pointer}
button.mitem:active{background:rgba(255,255,255,.08)}
.mitem > svg{width:22px;height:22px;flex:none;opacity:.85}
.mitem > svg:last-child{width:16px;height:16px;opacity:.5}
.mt{flex:1;min-width:0;display:grid;gap:2px}
.mt b{font-size:15.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt small{font-size:13px;line-height:1.3;color:var(--app-muted);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mlist .mnote{margin:0;padding:14px}
.pgroup{display:flex;flex-direction:column;gap:8px}
.ph{display:flex;align-items:center;gap:10px;padding:0 0 0 4px}
.ph b{font-size:16.5px}
/* a person you can edit: the whole heading is the button */
button.ph{min-height:52px;width:100%;border:0;border-radius:16px;background:none;color:var(--app-ink);font:inherit;text-align:left;cursor:pointer;padding:4px 8px 4px 6px;margin:0 -2px}
button.ph:active{background:rgba(255,255,255,.08)}
button.ph > svg{width:16px;height:16px;flex:none;opacity:.5;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pedit-l{font-size:13.5px;font-weight:650;color:var(--accent)}
.pform .mwhen{color-scheme:dark;margin-bottom:8px;-webkit-appearance:none;appearance:none;display:flex;align-items:center}
.pform .mwhen::-webkit-date-and-time-value{text-align:left}
.mfacts{display:flex;flex-wrap:wrap;gap:6px}
.mfacts span{font-size:13px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--app-muted)}
.mrename{display:flex;gap:8px}
.mrename .mfield{flex:1;min-width:0}
.mlist.acts .mitem{min-height:50px}
.mitem.act b{font-weight:550;white-space:normal}
.mitem.act time{flex:none;font-size:12.5px;color:var(--app-muted);font-variant-numeric:tabular-nums}
.mitem.act.blocked b{color:#ffc7a8}
/* away access: three options */
.mopts{display:flex;flex-direction:column;gap:8px}
.mopts.busy{opacity:.7}
.mopt{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 14px;border-radius:18px;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--app-ink);text-align:left;font:inherit;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .14s var(--press)}
.mopt:active{transform:scale(.98)}
.mopt i{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);transition:box-shadow .2s}
.mopt[aria-checked="true"]{background:rgba(255,178,122,.12);box-shadow:inset 0 0 0 2px var(--accent)}
.mopt[aria-checked="true"] i{box-shadow:inset 0 0 0 7px var(--accent)}
.mopt .mt small{-webkit-line-clamp:3}
.mstatus{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:12px 8px 12px 14px;border-radius:16px;background:rgba(255,255,255,.06);font-size:14px}
.mstatus .ms{font-weight:650}
.mstatus[data-state="ready"] .ms{color:#a8f0b8}
.mstatus .murl{flex:1 1 100%;order:3;color:var(--accent);word-break:break-all;font-size:13px}
.mstatus .mbtn{margin-left:auto}

/* ---------- first run (onboard.js): full screen, swipe or Next ---------- */
.onb{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:radial-gradient(120% 70% at 50% 0%,#6a5a8e 0%,#3a2f58 55%,#2a2340 100%);color:var(--app-ink);opacity:0;transition:opacity .28s}
.onb.on{opacity:1}
.onb-top{flex:none;display:flex;justify-content:flex-end;padding:calc(6px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal))}
.onb-skip{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:var(--app-ink);font-weight:650;font-size:15px;cursor:pointer}
.onb-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.onb-track::-webkit-scrollbar{display:none}
.onb-step{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;display:flex;padding:8px calc(24px + var(--sar)) 8px calc(24px + var(--sal))}
.onb-in{margin:auto;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.onb h1{margin:6px 0 0;font-size:28px;line-height:1.15;letter-spacing:-.015em}
.onb p{margin:0;font-size:16px;line-height:1.45;color:var(--app-muted)}
.art-wrap{display:grid;place-items:center;min-height:150px}
.art{width:180px;height:auto}
.art.dev{position:relative;display:grid;place-items:center}
.art.dev.phone svg{width:86px}
.art.dev.laptop svg{width:170px}
.art .tagname{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);max-width:150px;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onb-note{display:grid;gap:3px;width:100%;margin-top:6px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.09);font-size:14.5px;line-height:1.4}
.onb-note span{color:var(--app-muted)}
.onb-name{width:100%;height:54px;margin-top:6px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.1);color:#fff;padding:0 16px;font:inherit;font-size:18px;font-weight:600;text-align:center;outline:none}
.onb-name:focus{border-color:rgba(255,178,122,.8)}
.onb-name:focus-visible,.mfield:focus-visible{outline:none}
.onb-how,.onb-steps{list-style:none;margin:8px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.onb-how li{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 14px 8px 8px;border-radius:18px;background:rgba(255,255,255,.07);font-size:15.5px;line-height:1.35;color:var(--app-muted)}
.onb-how li b{color:var(--app-ink)}
.onb-how svg{flex:none;width:56px;height:44px}
.onb-steps li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 10px;border-radius:16px;background:rgba(255,255,255,.07);font-size:15.5px;line-height:1.35;color:var(--app-muted)}
.onb-steps li b{color:var(--app-ink)}
.onb-steps .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px}
.onb-steps .t{flex:1;min-width:0}
.onb-steps .g{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}
.onb-steps .g svg{width:20px;height:20px}
.onb-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:448px;margin:0 auto;padding:10px calc(24px + var(--sar)) calc(16px + var(--sab)) calc(24px + var(--sal))}
.onb-dots{display:flex;gap:7px}
.onb-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .3s var(--spring),background .2s}
.onb-dots i.on{width:20px;background:#fff}
.onb-next{min-height:52px;min-width:120px;padding:0 26px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-weight:750;font-size:16.5px;cursor:pointer;transition:transform .14s var(--press)}
.onb-next:active{transform:scale(.96)}
@media (max-height:600px){ .art-wrap{min-height:100px} .art{width:130px} .art.dev.phone svg{width:64px} .onb h1{font-size:24px} .onb-how li{min-height:54px} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
  .holdring.on circle{stroke-dashoffset:0} .voice .wave i{height:22px}
}