/* Device UIs, Foxglove palette. --u is the size unit for shared detail blocks on each device. */
.hu{position:absolute;inset:0;background:var(--fx-wp);color:#fff;font-family:var(--f-body);overflow:hidden;text-align:left}
.hu-head{display:flex;gap:calc(var(--u)*3);align-items:center}
.hu-big{flex:0 0 auto;width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:calc(var(--u)*4)}
.hu-big svg{width:calc(var(--u)*8.5);height:calc(var(--u)*8.5)}
.hu-kick{font-family:var(--f-pixel);font-size:calc(var(--u)*2.9);color:var(--fx-p);letter-spacing:.04em}
.hu-name{font-family:var(--f-display);font-size:calc(var(--u)*5.6);color:var(--fx-ink);line-height:1.15;overflow-wrap:anywhere}
.hu-desc{font-size:calc(var(--u)*3.4);line-height:1.5;margin:0;color:#4a3a5a}
.hu-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2)}
.hu-chips span{font-family:var(--f-pixel);font-size:calc(var(--u)*2.6);border:1px solid #e3d0f2;border-radius:calc(var(--u)*1.4);padding:0 calc(var(--u)*1.6);color:var(--fx-ink);background:var(--fx-soft)}
.hu-rows{display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
.hu-row{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*16) auto;gap:calc(var(--u)*2);align-items:center;font-size:calc(var(--u)*2.8);background:#faf6fd;border:1px solid #f0e4f8;border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*1) calc(var(--u)*2);color:#3b1b55}
.hu-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-pixel)}
.hu-row small{color:#9a7cb3}
.hu-row b{font-family:var(--f-pixel);font-weight:400;color:#2d8a12;white-space:nowrap}
.hu-row .m{height:calc(var(--u)*1.5);background:#eadcf5;border-radius:9px;overflow:hidden}
.hu-row .m i{display:block;height:100%;background:linear-gradient(90deg,var(--fx-a),var(--fx-p))}
.hu-row.kv{grid-template-columns:minmax(0,1fr) auto}
.hu-row.kv b{color:var(--fx-a)}
.hu-log{background:#1d1028;color:#e9c6f2;font-family:var(--f-pixel);font-size:calc(var(--u)*2.7);line-height:1.5;padding:calc(var(--u)*2) calc(var(--u)*2.4);border-radius:calc(var(--u)*1.6)}
.hu-log em{font-style:normal;color:#8dff6a}.hu-log .s{color:#ffd166}
.hu-btn{border:0;background:linear-gradient(180deg,var(--fx-p),var(--fx-a));color:#fff;font-weight:800;font-size:calc(var(--u)*3.4);border-radius:calc(var(--u)*3);padding:calc(var(--u)*1.8) calc(var(--u)*4);box-shadow:0 calc(var(--u)*.6) 0 #6a2690}

/* phone */
.ph-ui{--u:1cqw}
.ph-ui .hu-st{display:flex;justify-content:space-between;padding:5.4cqw 8cqw 0;font-weight:800;font-size:4cqw;color:var(--fx-ink)}
.ph-clock{text-align:center;margin-top:8cqw;color:var(--fx-ink)}
.ph-clock b{display:block;font-family:var(--f-display);font-weight:400;font-size:15cqw;line-height:1.05}
.ph-clock span{font-size:3.8cqw;opacity:.8}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6cqw 3cqw;padding:10cqw 6cqw 0}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:1.8cqw;border:0;background:none;padding:0;color:#fff;font-size:3.3cqw;font-weight:800;text-shadow:0 1px 3px rgba(59,27,85,.65);min-width:0}
.ph-app span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-app .tile{width:17cqw;height:17cqw;border-radius:5cqw;transition:transform .25s cubic-bezier(.2,.9,.3,1.5)}
.ph-app .tile svg{width:9cqw;height:9cqw}
.ph-app:active .tile{transform:scale(.9)}
.ph-app.on .tile{box-shadow:0 0 0 .9cqw #fff,0 0 0 1.8cqw var(--fx-p)}
.ph-bar{position:absolute;bottom:2.4cqw;left:50%;width:34cqw;height:1.4cqw;margin-left:-17cqw;border-radius:1cqw;background:rgba(255,255,255,.9);z-index:9}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;height:80%;background:#fff;color:#1c2a3f;border-radius:7cqw 7cqw 0 0;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.3,1.05);padding:3cqw 6cqw 9cqw;display:flex;flex-direction:column;gap:3cqw;overflow:auto;z-index:8;box-shadow:0 -2cqw 6cqw rgba(59,27,85,.25)}
.ph-sheet.open{transform:none}
.ph-sheet .grab{width:14cqw;height:1.4cqw;border-radius:1cqw;background:#e2d6ea;margin:0 auto;flex:0 0 auto}

/* laptop */
.lp-ui{--u:.56cqw}
.lp-menu{position:absolute;left:0;right:0;top:0;height:5cqw;display:flex;align-items:center;gap:2cqw;padding:0 2cqw;background:rgba(255,255,255,.88);color:var(--fx-ink);font-size:2.1cqw;z-index:3}
.lp-menu svg{width:2.4cqw;height:3.4cqw}
.lp-menu .sp{flex:1}
.lp-win{position:absolute;left:6%;right:6%;top:10%;bottom:19%;background:#fff;border-radius:1.6cqw;box-shadow:0 1.6cqw 4cqw rgba(59,27,85,.3);display:grid;grid-template-columns:30% 1fr;overflow:hidden;color:#1c2a3f}
.lp-side{background:var(--fx-soft);padding:1.6cqw;display:flex;flex-direction:column;gap:.5cqw;overflow:auto}
.lp-cap{font-family:var(--f-pixel);font-size:1.8cqw;color:#9a7cb3;margin:0 0 .6cqw .6cqw}
.lp-side button{display:flex;align-items:center;gap:1.2cqw;border:0;background:none;border-radius:1cqw;padding:.5cqw .8cqw;font-size:2.1cqw;font-weight:800;color:var(--fx-ink);text-align:left}
.lp-side button .tile{width:3.8cqw;height:3.8cqw;border-radius:1cqw;flex:0 0 auto}
.lp-side button .tile svg{width:2.2cqw;height:2.2cqw}
.lp-side button.on{background:#fff;box-shadow:inset .5cqw 0 0 var(--fx-p)}
.lp-main{padding:2.6cqw 3cqw;display:flex;flex-direction:column;gap:1.8cqw;overflow:auto}
.lp-dock{position:absolute;left:50%;bottom:2.2cqw;transform:translateX(-50%);display:flex;gap:1.2cqw;padding:1cqw 1.6cqw;border-radius:2.4cqw;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.7);max-width:92%}
.lp-dock button{border:0;background:none;padding:0;position:relative;transition:transform .2s cubic-bezier(.2,.9,.3,1.6)}
.lp-dock button:hover{transform:translateY(-.8cqw) scale(1.12)}
.lp-dock .tile{width:5cqw;height:5cqw;border-radius:1.4cqw}
.lp-dock .tile svg{width:2.8cqw;height:2.8cqw}
.lp-dock button.on::after{content:"";position:absolute;left:50%;bottom:-1cqw;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;background:#fff}

/* headset panels */
.vr-ui{--u:1.05cqw;background:transparent;color:var(--fx-ink);padding:6cqw;display:flex;flex-direction:column;gap:3cqw}
.vr-c{gap:2.6cqw;overflow:auto}
.vr-h{font-family:var(--f-pixel);font-size:5cqw;color:#9a7cb3}
.vr-list{display:flex;flex-direction:column;gap:1.4cqw;overflow:auto}
.vr-list button{display:flex;align-items:center;gap:3cqw;border:0;background:rgba(255,255,255,.6);border-radius:3cqw;padding:1.6cqw 2.4cqw;font-size:4.6cqw;font-weight:800;color:var(--fx-ink);text-align:left;transition:transform .2s}
.vr-list button:hover{transform:translateX(1.4cqw)}
.vr-list button .tile{width:8cqw;height:8cqw;border-radius:2.2cqw;flex:0 0 auto}
.vr-list button .tile svg{width:4.6cqw;height:4.6cqw}
.vr-list button.on{background:#fff;box-shadow:0 0 0 .7cqw var(--fx-p)}
.vr-clock{font-family:var(--f-display);font-size:13cqw;line-height:1;color:var(--fx-ink)}
.vr-day{font-size:4.4cqw;color:#7a5a92;margin-top:-1cqw}
.vr-card{background:rgba(255,255,255,.75);border-radius:3cqw;padding:2.4cqw 3.4cqw;font-size:4.6cqw;font-weight:800;box-shadow:0 0 0 1px #f0e4f8}
.vr-card b{display:block;font-family:var(--f-pixel);font-weight:400;font-size:3.8cqw;color:#9a7cb3}
.vr-card.note{background:linear-gradient(135deg,#ffe1f0,#f0dcf8)}
.vr-stats{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.vr-stats div{background:rgba(255,255,255,.75);border-radius:3cqw;padding:2.2cqw;font-size:3.8cqw;color:#7a5a92;text-align:center}
.vr-stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:8cqw;color:var(--fx-a)}

/* alt button: workers connected · menu switch */
.hu-wk{align-self:flex-start;border:1px solid #e3d0f2;background:linear-gradient(180deg,#fff,#f6eefb);color:var(--fx-ink);font-weight:800;font-size:calc(var(--u)*2.8);border-radius:calc(var(--u)*3);padding:calc(var(--u)*1) calc(var(--u)*2.6);cursor:pointer;box-shadow:0 calc(var(--u)*.5) 0 #ecdff6}
.hu-wk:hover{background:linear-gradient(180deg,#fdf6ff,#efe0f8)}
.hu-wkcap{font-family:var(--f-pixel);font-size:calc(var(--u)*2.6);color:#9a7cb3}
.ph-menu{display:flex;justify-content:center;align-items:center;gap:2cqw;margin-top:3cqw;font-size:3.4cqw}
.ph-menu>b{font-family:var(--f-display);font-weight:400;color:var(--fx-ink);font-size:3.2cqw}

/* app splash: the app's logo for 2 s, then the app screen */
.hu-appbody{position:relative;min-height:calc(var(--u)*34)}
.hu-splash{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.4);
  background:linear-gradient(160deg,#fff,var(--fx-soft,#f6ecfb));border-radius:calc(var(--u)*1.8);animation:hu-spl 2s both;pointer-events:none}
.hu-splash b{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*4.2);color:var(--fx-ink,#3b1b55)}
.hu-splash-tile{width:calc(var(--u)*17);height:calc(var(--u)*17);border-radius:calc(var(--u)*4.6);animation:hu-pop .55s cubic-bezier(.2,.9,.3,1.4) both}
.hu-splash-tile svg{width:calc(var(--u)*9.5);height:calc(var(--u)*9.5)}
@keyframes hu-spl{0%{opacity:0}7%{opacity:1}86%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes hu-pop{0%{transform:scale(.55);opacity:0}100%{transform:none;opacity:1}}
.dsx .ds-ap{position:relative}
@media (prefers-reduced-motion:reduce){.hu-splash{display:none}}