/* paraxa.site, but the front page is a window you can close.
   Everything here is CSS pastiche - no Microsoft artwork, no logos. The
   wallpaper is a gradient, the start orb is a shape. */

:root{
  --xp-blue-1:#2b6ed4;
  --xp-blue-2:#1c4fa8;
  --xp-face:#ece9d8;
  --xp-edge:#0831d9;
  --xp-bar-1:#0058e6;
  --xp-bar-2:#3f8cf3;
  --xp-bar-3:#0043c8;
}

/* --- the title bar over the site ----------------------------------------- */
#winbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:8px;
  height:29px;padding:0 3px 0 7px;
  background:linear-gradient(180deg,var(--xp-bar-2) 0,var(--xp-bar-1) 8%,var(--xp-bar-1) 40%,var(--xp-bar-3) 100%);
  border-bottom:1px solid #0b3fa8;
  font:400 12px/1 "Trebuchet MS",Tahoma,Verdana,sans-serif;
  color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.5);
  user-select:none;
}
#winbar .t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
#winbar .btns{display:flex;gap:2px}
#winbar button{
  width:22px;height:21px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);border-radius:3px;
  background:linear-gradient(180deg,#5c9ef0,#1e5fc8);
  color:#fff;font:700 11px/1 Tahoma,Verdana,sans-serif;
  display:flex;align-items:center;justify-content:center;
}
#winbar button:hover{background:linear-gradient(180deg,#7db4f6,#2f74dd)}
#winbar button.x{background:linear-gradient(180deg,#e8785a,#c53213)}
#winbar button.x:hover{background:linear-gradient(180deg,#f2937a,#d8492a)}

/* the site sits below the bar when the chrome is on.
   #site has to carry a real height or .sheet's height:100% resolves against an
   auto-height parent and the front page stops being vertically centred. */
body.chrome{padding-top:29px}
#site{height:100%}
body.chrome #site{height:calc(100% - 29px)}

/* --- closed: the site is gone, the desktop is there ---------------------- */
body.xp{overflow:hidden}
body.xp #site,body.xp #winbar,body.xp .botanical,body.xp .credit{display:none!important}
/* the weather canvas stays: st. louis rain falls on the hill too. above the
   wallpaper, below the windows (50+) and the taskbar (60). */
body.xp #wx{z-index:45}

#xpdesk{
  position:fixed;inset:0;z-index:40;
  font:400 12px/1.35 Tahoma,Verdana,"DejaVu Sans",sans-serif;
  color:#fff;
  /* the hill is a wide ellipse parked below the fold, so its top edge is a
     curve rather than the hard horizontal a linear stop gives you */
  background:
    radial-gradient(150% 62% at 50% 124%, #79b944 0 52%, #5b9330 76%, #4a7a25 79%, transparent 79.3%),
    radial-gradient(58% 30% at 22% 26%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(42% 22% at 74% 16%, rgba(255,255,255,.38), transparent 70%),
    linear-gradient(180deg,#1a56b8 0,#2f78d6 26%,#5ba3e8 52%,#9ccdf2 74%,#d8ecfa 92%,#eaf4fc 100%);
  user-select:none;
}

/* --- desktop icons ------------------------------------------------------- */
.icons{position:absolute;top:14px;left:12px;display:flex;flex-direction:column;gap:6px}
.icon{
  width:82px;padding:6px 4px 5px;border:1px dotted transparent;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;text-align:center;background:none;color:#fff;font:inherit;
}
.icon:hover{background:rgba(255,255,255,.14)}
.icon:focus-visible,.icon.on{background:rgba(11,60,160,.55);border-color:rgba(255,255,255,.6);outline:none}
.icon .g{width:34px;height:34px;display:block;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
.icon .l{text-shadow:0 1px 3px rgba(0,0,0,.85);word-break:break-word;line-height:1.25}

/* --- a window ------------------------------------------------------------ */
.win{
  position:absolute;z-index:50;
  min-width:220px;
  background:var(--xp-face);
  border:1px solid var(--xp-edge);
  border-radius:8px 8px 2px 2px;
  box-shadow:3px 4px 14px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  color:#000;
}
.win .bar{
  display:flex;align-items:center;gap:8px;height:27px;padding:0 3px 0 7px;
  background:linear-gradient(180deg,var(--xp-bar-2) 0,var(--xp-bar-1) 8%,var(--xp-bar-1) 40%,var(--xp-bar-3) 100%);
  border-radius:6px 6px 0 0;cursor:move;
  color:#fff;font:700 12px/1 "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.win .bar .t{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win .bar button{
  width:21px;height:20px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);border-radius:3px;
  background:linear-gradient(180deg,#e8785a,#c53213);
  color:#fff;font:700 11px/1 Tahoma,sans-serif;
}
.win .menu{
  display:flex;gap:14px;padding:3px 8px;background:var(--xp-face);
  border-bottom:1px solid #c7c3ac;font-size:11px;color:#222;
}
.win .paper{
  flex:1 1 auto;margin:2px;padding:8px 10px;overflow:auto;
  background:#fff;border:1px solid #7f9db9;
  font:400 13px/1.5 "Lucida Console","Consolas",ui-monospace,monospace;
  color:#111;white-space:pre-wrap;word-wrap:break-word;
}

/* --- taskbar ------------------------------------------------------------- */
.taskbar{
  position:absolute;left:0;right:0;bottom:0;height:30px;z-index:60;
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(180deg,#3f8cf3 0,#215dc6 9%,#2b6ed4 18%,#1c4fa8 92%,#15408c 100%);
  border-top:1px solid #4a92f0;
}
.start{
  display:flex;align-items:center;gap:6px;height:100%;padding:0 16px 0 9px;
  border:0;cursor:pointer;color:#fff;
  font:700 13px/1 "Trebuchet MS",Tahoma,sans-serif;font-style:italic;
  text-shadow:1px 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(180deg,#5eb85e 0,#3f9c3f 42%,#2f8630 60%,#256f28 100%);
  border-radius:0 9px 9px 0;
}
.start .orb{
  width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 14%,#ff5a3c 16%,#c8341c 74%,#8f1f0e 100%);
  box-shadow:inset 0 0 2px rgba(0,0,0,.4);
}
.tasks{flex:1 1 auto;display:flex;gap:4px;padding-left:6px;overflow:hidden}
.task{
  max-width:190px;height:22px;padding:0 10px;cursor:pointer;
  border:1px solid #2a63b8;border-radius:3px;
  background:linear-gradient(180deg,#4a8ceb,#2c66c4);
  color:#fff;font:400 11px/1 Tahoma,sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.task:hover{background:linear-gradient(180deg,#6ba4f2,#3d78d6)}
.tray{
  display:flex;align-items:center;gap:8px;height:100%;padding:0 12px;
  background:linear-gradient(180deg,#28a2e8 0,#1878cd 48%,#1263b4 100%);
  border-left:1px solid #4a92f0;
  font:400 11px/1 Tahoma,sans-serif;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.4);
}

@media (max-width:640px){
  /* no !important on left: that would win against the drag handler and pin
     every window to the edge. js picks the opening position instead. */
  .win{max-width:calc(100vw - 16px)}
  .icons{gap:2px}
}
@media (prefers-reduced-motion:no-preference){
  .win{animation:pop .12s ease-out}
  @keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
}


/* --- start menu ---------------------------------------------------------- */
.startmenu{
  position:absolute;left:0;bottom:30px;z-index:70;width:236px;
  border:1px solid #0831d9;border-radius:6px 6px 0 0;overflow:hidden;
  box-shadow:2px -2px 14px rgba(0,0,0,.4);
  background:#fff;
}
.startmenu[hidden]{display:none}
.startmenu .who{
  padding:9px 12px;color:#fff;
  font:700 14px/1 "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#1f6fdc,#1250b4);
  border-bottom:2px solid #ff9d3a;
}
.startmenu ul{list-style:none;margin:0;padding:5px 0}
.startmenu li{margin:0}
.startmenu button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 12px;border:0;background:none;cursor:pointer;text-align:left;
  font:400 12px/1.2 Tahoma,Verdana,sans-serif;color:#111;
}
.startmenu button:hover{background:#2f6fd0;color:#fff}
.startmenu .dot{
  width:16px;height:16px;flex:0 0 16px;border-radius:3px;
  background:linear-gradient(160deg,#8fc0f0,#2f6fd0);
}
.startmenu .rule{height:1px;margin:5px 8px;background:#c9c9c9}
.startmenu .foot{
  padding:0;background:linear-gradient(180deg,#2f7ddd,#1f5cbb);border-top:1px solid #14449b;
}
.startmenu .foot button{color:#fff;font-weight:700}
.startmenu .foot button:hover{background:rgba(255,255,255,.18)}
.startmenu .foot .dot{background:linear-gradient(160deg,#ff9a7a,#c0311a)}

/* --- resize grip --------------------------------------------------------- */
.win .grip{
  position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;touch-action:none;
  background:
    linear-gradient(135deg,transparent 0 46%,#9a978a 46% 54%,transparent 54% 100%),
    linear-gradient(135deg,transparent 0 66%,#9a978a 66% 74%,transparent 74% 100%);
}
.win{overflow:hidden}