/* ---------- the apps live in the dock (a computer) and the bottom bar is a setting ---------- */
@media (min-width:641px){.icons .icon[data-home]{display:none!important}}
@media (max-width:640px){.icons .icon[data-desk-only]{display:none!important}}
html.bar-off .dock{display:none!important}
.dock .di{width:var(--di,40px);height:var(--di,40px)}
.dock .di svg{width:calc(var(--di,40px) - 4px);height:calc(var(--di,40px) - 4px)}
.dock .di .dg{width:calc(var(--di,40px) - 8px);height:calc(var(--di,40px) - 8px)}
.dock .dgsep{height:22px;opacity:.35}
.dock .di .dmore{position:absolute;top:-4px;right:-4px;min-width:20px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--lime);color:var(--lime-ink);border:1px solid var(--line);font:700 12px/16px var(--display);text-align:center;pointer-events:none}
body.phone .dock .di{width:44px;height:44px}
.menubar button.dk-receive{background:var(--lime);color:var(--lime-ink)}
/* All Apps: groups, a + on each tile, and a launcher that steps aside while an app is dragged */
.apps-wrap.ap-hold{opacity:0;pointer-events:none}
.apps-grid .apps-group{grid-column:1/-1;margin:12px 0 0;font:600 12px/1.3 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px}
.apps-grid .apps-group[hidden]{display:none}
.apps-grid .ai-cell{position:relative;display:flex;justify-content:center}.apps-grid .ai-cell[hidden]{display:none}
.apps-grid .ai-add{position:absolute;top:2px;right:6px;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 16px/1 var(--display);opacity:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.apps-grid .ai-cell:hover .ai-add,.apps-grid .ai-add:focus-visible{opacity:1}
.apps-hint{font-size:13px;color:var(--muted);margin-top:16px;text-align:center}
.apps-hint:empty{display:none}
/* shortcuts on the desktop: the icon of what they open and the alias arrow */
.icons .icon.sc{position:relative}
.icons .icon .sc-alias{position:absolute;left:calc(50% - 30px);top:38px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 0 var(--line);pointer-events:none}
.icons .icon .sc-alias svg{width:12px;height:12px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:none}
/* the alias icon in a window's title bar */
.win .tb .tb-proxy{flex:none;width:20px;height:20px;padding:0;margin:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px;background:none;color:var(--ink);opacity:.55;cursor:pointer;align-self:center}
.win .tb .tb-proxy[hidden]{display:none}
.win .tb .tb-proxy svg{width:12px;height:12px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.win .tb:hover .tb-proxy,.win .tb .tb-proxy:focus-visible{opacity:1;border-color:var(--line);background:var(--paper)}
body.phone .win .tb .tb-proxy{display:none}
.dw-readme h2{margin:0 0 8px}.dw-readme ul{margin:10px 0 14px;padding-left:20px;display:grid;gap:8px}.dw-readme li{line-height:1.45}
/* below 1280 px the social icons stand in a column, so the dock can use the width between them and the Byte orb */
@media (min-width:641px) and (max-width:1279px){.socials{flex-direction:column}}