/* Shared Win98 desktop. Pairs with win98.js, on top of 98.css */
/* Its own background keeps body's from spreading over the whole window, so
   body's padding below can frame the photo */
html {
  background: #008080;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  /* A photo wallpaper (content-box) sits inside this padding with teal
     around it; plain colours and patterns ignore it and fill the screen */
  box-sizing: border-box;
  /* 5% of the desktop on each side (above the 30px taskbar): the photo
     takes 90% of the width and height */
  --frame: calc((100dvh - 30px) * 0.05);
  padding: var(--frame) 5vw calc(var(--frame) + 30px);
  background: var(--desktop-bg, url(atacama.jpg) center / cover no-repeat content-box, #008080);
}

/* 98.css draws the UI at 11px: one step up, like Win98's Large Fonts */
.title-bar,
.window,
button,
input,
label,
option,
select,
table,
textarea {
  font-size: 12px;
}

.desktop {
  position: fixed;
  inset: 0 0 30px 0;
}

/* Desktop icons: flex flow until one is dragged, then .free (absolute) */
.icons {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.icons.free .icon {
  position: absolute;
}

.icon,
.icon:active {
  width: 76px;
  min-width: 0;
  min-height: 0;
  padding: 4px 2px;
  background: none;
  box-shadow: none;
  color: #fff;
  /* readable over a photo wallpaper too */
  text-shadow: 1px 1px #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.icon svg {
  width: 32px;
  height: 32px;
}

.icon.sel span {
  background: #000080;
}

.icon.sel svg {
  filter: brightness(0.6) sepia(1) hue-rotate(190deg) saturate(4);
}

.icon:focus {
  outline: none;
}

.icon:focus-visible span {
  outline: 1px dotted #fff;
}

.band,
.zoom {
  position: fixed;
  z-index: 2500;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px dotted #fff;
  mix-blend-mode: difference;
}

.zoom {
  border-width: 2px;
}

/* Windows */
.window {
  position: absolute;
  width: min(640px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 220px;
  min-height: 120px;
  --rs: 4px;
}

/* An iframe under the pointer would swallow the moves of a drag */
.dragging iframe {
  pointer-events: none;
}

.window[hidden] {
  display: none;
}

.window:focus {
  outline: none;
}

/* !important: beats per-window start positions and inline drag offsets,
   so restoring puts the window back where it was */
.window.max {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Resize handles along every edge and corner (win98.js adds them) */
.rs {
  position: absolute;
  z-index: 1;
  touch-action: none;
}

.rs[data-dir="n"],
.rs[data-dir="s"] {
  left: calc(var(--rs) * 2);
  right: calc(var(--rs) * 2);
  height: var(--rs);
  cursor: ns-resize;
}

.rs[data-dir="e"],
.rs[data-dir="w"] {
  top: calc(var(--rs) * 2);
  bottom: calc(var(--rs) * 2);
  width: var(--rs);
  cursor: ew-resize;
}

.rs[data-dir*="n"] { top: 0; }
.rs[data-dir*="s"] { bottom: 0; }
.rs[data-dir*="e"] { right: 0; }
.rs[data-dir*="w"] { left: 0; }

.rs[data-dir="ne"],
.rs[data-dir="sw"],
.rs[data-dir="nw"],
.rs[data-dir="se"] {
  width: calc(var(--rs) * 2.5);
  height: calc(var(--rs) * 2.5);
  cursor: nesw-resize;
}

.rs[data-dir="nw"],
.rs[data-dir="se"] {
  cursor: nwse-resize;
}

.window.max .rs {
  display: none;
}

@media (pointer: coarse) {
  .window {
    --rs: 12px;
  }
}

.title-bar {
  touch-action: none;
  user-select: none;
}

.title-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-body {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Run dialog, above the Start button like the real one */
#run {
  left: 8px;
  top: max(8px, calc(100% - 200px));
  width: min(380px, calc(100vw - 16px));
}

.run {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.run-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.run p {
  margin: 0;
}

.run input {
  flex: 1;
  min-width: 0;
}

.run-err {
  color: #800000;
}

.run-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Menus (menu bar dropdowns and the Start menu) are <details> */
.menubar {
  display: flex;
  padding: 2px;
}

.menu {
  position: relative;
}

.menu > summary,
.menubar > a {
  list-style: none;
  padding: 2px 6px;
  cursor: default;
  color: #222;
  text-decoration: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menubar .menu[open] > summary,
.menubar > a:hover {
  background: #000080;
  color: #fff;
}

.dropdown {
  position: absolute;
  z-index: 1000;
  margin: 0;
  padding: 2px;
  list-style: none;
  min-width: 160px;
  background: silver;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px grey,
    inset 2px 2px #fff;
}

.dropdown a,
.dropdown button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px 20px;
  text-align: left;
  color: #222;
  text-shadow: none;
  text-decoration: none;
  background: none;
  box-shadow: none;
  font: inherit;
}

.dropdown a:hover,
.dropdown button:hover,
.dropdown button:focus-visible {
  background: #000080;
  color: #fff;
  outline: none;
}

.dropdown hr {
  margin: 3px 2px;
  border: 0;
  border-top: 1px solid grey;
  border-bottom: 1px solid #fff;
}

/* Desktop right-click menu */
.ctx {
  position: fixed;
  z-index: 3000;
}

/* Taskbar */
.taskbar {
  position: fixed;
  inset: auto 0 0 0;
  height: 30px;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  gap: 4px;
  background: silver;
  box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
  z-index: 2000;
}

.start > summary {
  height: 100%;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

.start[open] > summary,
.task.on {
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset 2px 2px grey;
}

.start .dropdown {
  bottom: 100%;
  left: 0;
  min-width: 180px;
  padding-left: 27px;
}

/* Rotated 180deg so it reads bottom-up, hence the gradient runs navy-first */
.start .banner {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 22px;
  padding: 6px 0;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: linear-gradient(#000080, grey);
  color: #c0c0c0;
  font: 18px/22px Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
}

.start .banner b {
  color: #fff;
}

.start .dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px 6px 6px;
}

.start .dropdown svg {
  flex: none;
}

.quick {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 4px;
  box-shadow: inset 1px 0 grey, inset 2px 0 #fff, inset -1px 0 grey, inset -2px 0 #fff;
}

.quick button {
  min-width: 0;
  min-height: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
}

.quick button:hover {
  box-shadow: inset -1px -1px grey, inset 1px 1px #fff;
}

.tasks {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 0;
}

.task {
  width: 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  text-align: left;
}

.task svg {
  flex: none;
}

.task span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task.on {
  font-weight: bold;
}

.tray {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
}

/* Language indicator, like Win98's "En": plain text, a button underneath */
.tray .lang,
.tray .lang:active {
  min-width: 0;
  min-height: 0;
  padding: 0 3px;
  margin-right: 4px;
  background: none;
  box-shadow: none;
}

/* Phones: every window is full screen, no drag/resize, 16px text so iOS
   doesn't zoom into inputs */
@media (max-width: 600px) {
  body {
    padding: 8px 8px 38px;
  }

  .window {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .rs {
    display: none;
  }

  body .window-body,
  body .window :is(input, textarea, select) {
    font-size: 16px;
  }

  .quick {
    display: none;
  }

  .tray {
    padding: 0 6px;
  }
}