/* GRAND EXILE desktop — wallpaper, boot, bar, desk, dock, windows, notes. Ported from concepts/m-desktop (miuOS). */
/* ---------- wallpaper ---------- */
#wall{position:fixed;inset:0;width:100vw;height:100vh;image-rendering:pixelated;display:block;z-index:0}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;place-items:center}
.booting #boot{display:grid}
#boot.gone{opacity:0;transition:opacity .5s linear;pointer-events:none}
.boot-in{display:grid;justify-items:center;gap:26px;transform:translateY(-10px)}
#bootmark{width:92px;height:92px;image-rendering:pixelated}
.boot-bar{width:176px;height:6px;border:1px solid var(--line2);border-radius:3px;overflow:hidden;position:relative}
.boot-bar i{position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(0)}
#bootlog{font:400 12px/1.65 var(--mono);color:var(--mute);white-space:pre;min-height:120px;width:420px}
#bootlog b{color:var(--teal);font-weight:500}#bootlog em{color:var(--amber);font-style:normal}
.boot-name{font:11px var(--px);letter-spacing:.32em;color:var(--ink2)}
.boot-name .os{color:var(--ink);font-weight:400}
/* the OS name is shown exactly as typed in the admin (miuOS), never re-cased */
.os{text-transform:none!important}
.mk{display:block;image-rendering:pixelated}

/* ---------- bar ---------- */
#bar{position:fixed;top:8px;left:10px;right:10px;height:36px;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 8px;border-radius:12px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px)}
.bar-l,.bar-r{display:flex;align-items:center;gap:6px}.bar-r{justify-content:flex-end}
.bar-logo{display:flex;align-items:center;gap:9px;padding:0 10px 0 4px;height:26px}
.bar-logo canvas{width:14px;height:16px;image-rendering:pixelated}
.bar-logo span{font:11px var(--px);letter-spacing:.12em}
.ws{display:flex;gap:4px;padding:3px;border-radius:9px;background:var(--line)}
.ws a{height:20px;min-width:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px;
  font:11px var(--px);color:var(--mute);padding:0 6px;transition:min-width .5s var(--ease),background .3s,color .3s}
.ws a span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease)}
.ws a:hover{color:var(--ink)}
.ws a.on{background:var(--teal);color:var(--bg);min-width:20px}
.ws a.on span{max-width:120px}
.clock{display:flex;align-items:center;gap:12px;font:11px var(--px);letter-spacing:.06em;color:var(--ink2)}
.clock b{font-weight:400;color:var(--ink);font-size:22px;line-height:1;letter-spacing:0}
.mag{display:flex;align-items:center;gap:7px}
.mag svg{width:14px;height:14px}
.chipd{font:11px var(--px);letter-spacing:.08em;color:var(--ink2);border:1px solid var(--line2);
  border-radius:6px;padding:2px 7px;text-transform:uppercase;white-space:nowrap;transition:color .25s,border-color .25s}
a.chipd:hover{color:var(--teal);border-color:var(--teal)}
.tbtn{height:26px;min-width:26px;padding:0 6px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:7px;
  font:11px var(--px);color:var(--ink2);transition:background .25s}
.tbtn:hover{background:var(--line)}
.tbtn svg{width:16px;height:16px;display:block}
.tog .moon{transition:transform .9s var(--ease)}
html[data-theme=light] .tog .moon{transform:translateX(9px)}

/* ---------- desktop widget ---------- */
#desk{position:fixed;inset:0;z-index:2;pointer-events:none;transition:opacity .62s cubic-bezier(.3,.1,.3,1)}
#desk.dim{opacity:.16}
html[data-theme=light] #desk.dim{opacity:.4}
#desk>*{pointer-events:auto}
/* one column from the bar to above the dock: the meta line closes it, so the shortcuts can never run into it */
.conky{position:absolute;left:clamp(32px,4.6vw,72px);top:clamp(96px,14vh,140px);bottom:94px;width:min(600px,46vw);display:flex;flex-direction:column}
.eyebrow{font:11px var(--px);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:flex;gap:10px;align-items:center}
.eyebrow i{width:6px;height:6px;background:currentColor;display:inline-block}
.wordmark{font:176px/154px var(--px);letter-spacing:-.02em;margin:26px 0 0 -10px;color:var(--ink);white-space:nowrap;
  text-shadow:2px 2px var(--ls),4px 4px var(--ls),6px 6px var(--ls),8px 8px var(--ls),10px 10px var(--ls2),12px 12px var(--ls2),14px 14px var(--ls2),16px 16px var(--ls2)}
.wordmark .cur{display:inline-block;width:.5em;height:.12em;background:var(--teal);vertical-align:.02em;margin-left:.06em;animation:blink 1.06s steps(1) infinite;text-shadow:none}
@keyframes blink{50%{opacity:0}}
.lede-d{margin:30px 0 0;max-width:460px;font:400 27px/1.2 var(--ui);font-stretch:94%;letter-spacing:-.022em;color:var(--ink)}
.lede-d em{font-style:normal;color:var(--teal)}
/* the tagline answers the one-liner: an eclipse glyph, then the line in the bar's amber */
.lede-d .tg{display:flex;align-items:center;gap:10px;margin-top:14px;font:11px var(--px);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lede-d .tg::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 72% 38%,var(--bg) 0 4.6px,transparent 5.2px),var(--amber)}
.wm a{border-bottom:1px dotted var(--mute)}.wm a:hover{color:var(--teal);border-color:var(--teal)}
/* max-width keeps the footer clear of the centred dock on narrow desktops (it wraps instead) */
.wm{position:absolute;right:24px;bottom:20px;max-width:calc(50vw - 215px);text-align:right;color:var(--mute);font:500 12.5px/1.45 var(--ui);opacity:.85}
.wm .os{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:4px;font:400 22px var(--px);color:var(--ink2);opacity:.7}
.wm .os canvas{width:23px;height:23px}
.dsk-meta{margin-top:auto;padding-top:18px;font:11px var(--px);letter-spacing:.1em;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 22px;text-transform:uppercase}
.dsk-meta span b{color:var(--ink2);font-weight:400}

/* ---------- dock ---------- */
#dock{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:50;display:flex;align-items:flex-end;gap:6px;padding:7px 9px;
  border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px)}
.dk{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;transition:transform .32s var(--ease),width .32s var(--ease),height .32s var(--ease)}
.dk .ic{width:44px;height:44px;transition:transform .32s var(--ease)}
.dk:hover .ic{transform:translateY(-6px) scale(1.14)}
.dk::after{content:'';position:absolute;bottom:-5px;left:50%;width:4px;height:4px;margin-left:-2px;background:var(--mute);border-radius:1px;opacity:0;transition:opacity .3s,width .4s var(--ease),margin .4s var(--ease),background .3s}
.dk.run::after{opacity:1}
.dk.on::after{width:14px;margin-left:-7px;background:var(--teal);opacity:1}
.dk .tip{position:absolute;bottom:58px;left:50%;transform:translate(-50%,6px);white-space:nowrap;font:11px var(--px);letter-spacing:.08em;text-transform:uppercase;
  background:var(--win);border:1px solid var(--line2);padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.dk:hover .tip,.dk:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.ic{display:block;border-radius:11px;overflow:hidden}

/* ---------- windows ---------- */
.win{position:fixed;z-index:10;display:none;flex-direction:column;border-radius:var(--r);
  background:linear-gradient(var(--win),var(--win)) padding-box,linear-gradient(var(--line2),var(--line2)) border-box;
  border:1.5px solid transparent;box-shadow:var(--shadow);transform-origin:50% 50%;will-change:transform}
.win.open,.win.anim{display:flex}
.win.focus{background:linear-gradient(var(--win),var(--win)) padding-box,var(--grad) border-box}
.win.max{left:10px!important;top:52px!important;width:calc(100vw - 20px)!important;height:calc(100vh - 136px)!important}
.win.dragging{box-shadow:0 60px 120px -40px rgba(0,0,0,.7),var(--shadow);transition:none}
.tb{height:38px;flex:none;display:flex;align-items:center;gap:10px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);user-select:none;touch-action:none;cursor:var(--cur-move,move)}
.tb .ic{width:16px;height:16px;border-radius:4px}
.tb .tt{font:11px var(--px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb .tt b{color:var(--ink);font-weight:400}
.tb .sp{flex:1}
.tb .hint{font:10.5px var(--mono);color:var(--mute)}
.wb{display:flex;gap:2px}
.wb button{width:26px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--mute);transition:background .2s,color .2s}
.wb button:hover{background:var(--line);color:var(--ink)}
.wb button.x:hover{background:color-mix(in srgb,var(--rose) 24%,transparent);color:var(--rose)}
.wb svg{width:11px;height:11px;shape-rendering:crispEdges}
.wc{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:0 0 calc(var(--r) - 2px) calc(var(--r) - 2px)}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.pback{display:none}

/* ---------- notification + context menu ---------- */
#note{position:fixed;top:54px;right:10px;z-index:60;width:330px;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--win);border:1px solid var(--line2);box-shadow:var(--shadow);transform:translateX(360px);transition:transform .7s var(--ease)}
#note.in{transform:none}
#note .note-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--win3);border:1px solid var(--line)}
#note .note-ic canvas{width:23px;height:23px}
#note b{font:11px var(--px);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:400;display:flex;justify-content:space-between}
#note b>span+span{color:var(--mute)}
#note p{font:13px/1.45 var(--ui);color:var(--ink2);margin-top:3px}
#note kbd{font:11px var(--px);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--ink)}
#ctx{position:fixed;z-index:90;min-width:220px;padding:6px;border-radius:12px;background:var(--win);border:1px solid var(--line2);box-shadow:var(--shadow);display:none}
#ctx.on{display:block;animation:ctxin .22s var(--ease)}
@keyframes ctxin{from{transform:translateY(-4px) scale(.98)}}
#ctx button,#ctx a{display:flex;width:100%;justify-content:space-between;gap:20px;padding:7px 10px;border-radius:7px;font:500 13.5px var(--ui);color:var(--ink2);text-align:left}
#ctx button:hover,#ctx a:hover{background:var(--sel);color:var(--ink)}
#ctx span{font:11px var(--px);color:var(--mute)}
#ctx hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
@media (max-width:720px){#note,#ctx{display:none!important}}