/*
 * The desktop the machine boots into.
 *
 * Deliberately nobody's desktop in particular: the shapes are the ones every
 * system of the period shared, and none of the names, logos or colours that
 * would make it somebody's.
 *
 * The whole look rests on one idea, which is that every surface is a piece of
 * moulded plastic lit from the top left. Raised things carry a light edge on the
 * top and left and a dark one on the bottom and right; sunk things carry the
 * same edges the other way round. There are no rounded corners, no soft shadows
 * and no anti-aliased anything, because none of that existed yet.
 */

#desktop {
  --chrome: #c6c6c6;
  --chrome-light: #dfdfdf;
  --chrome-white: #fff;
  --chrome-shadow: #8a8a8a;
  --chrome-dark: #3a3a3a;
  --title-active-from: #10306b;
  --title-active-to: #3a6ea5;
  --title-idle-from: #6b6b6b;
  --title-idle-to: #9a9a9a;
  --taskbar-h: 34px;
  --ui-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-size: 12px;

  position: absolute;
  inset: 0;
  /* The wallpaper. A flat colour is what most of these shipped with. */
  background: #267a9e;
  font-family: var(--ui-font);
  font-size: var(--ui-size);
  color: #000;
}

/* Raised plastic: two bevels a side, which is what gives the era its depth. */
.desktop-raised {
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark),
    inset 2px 2px 0 var(--chrome-light),
    inset -2px -2px 0 var(--chrome-shadow);
}

/* The same edges the other way round. */
.desktop-sunk {
  box-shadow:
    inset 1px 1px 0 var(--chrome-shadow),
    inset -1px -1px 0 var(--chrome-white),
    inset 2px 2px 0 var(--chrome-dark),
    inset -2px -2px 0 var(--chrome-light);
}

/* --- icons ----------------------------------------------------------------- */

#desktop .desktop-icons {
  position: absolute;
  inset: 0 0 var(--taskbar-h) 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 10px;
  box-sizing: border-box;
}

#desktop .desktop-icon {
  width: 88px;
  padding: 4px 2px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px dotted transparent;
  color: #fff;
  font: inherit;
  text-align: center;
}

#desktop .desktop-icon.is-selected {
  border-color: #fff;
}

#desktop .desktop-icon.is-selected .desktop-icon-label {
  background: var(--title-active-from);
}

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

/*
 * A placeholder pictogram rather than artwork: a little application window,
 * which is what these all were underneath whatever was drawn on them.
 */
#desktop .desktop-icon-glyph {
  width: 30px;
  height: 26px;
  background: var(--chrome);
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark);
  position: relative;
}

#desktop .desktop-icon-glyph::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--title-active-from),
    var(--title-active-to)
  );
}

#desktop .desktop-icon-glyph::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 10px;
  bottom: 2px;
  background: repeating-linear-gradient(
    180deg,
    #fff 0 2px,
    var(--chrome-light) 2px 4px
  );
}

#desktop .desktop-icon-label {
  padding: 1px 3px;
  line-height: 1.25;
  word-break: break-word;
}

/* --- windows --------------------------------------------------------------- */

/*
 * The surface takes no clicks of its own, so the empty desk between windows
 * still belongs to the icons underneath it.
 */
#desktop .desktop-windows {
  position: absolute;
  inset: 0 0 var(--taskbar-h) 0;
  pointer-events: none;
}

#desktop .window {
  position: absolute;
  width: min(460px, 78%);
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  padding: 3px;
  pointer-events: auto;
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark),
    inset 2px 2px 0 var(--chrome-light),
    inset -2px -2px 0 var(--chrome-shadow);
}

/*
 * Minimised. The display above is an author rule and so beats the one the
 * browser attaches to [hidden], which means without this a minimised window
 * stays exactly where it was.
 */
#desktop .window[hidden] {
  display: none;
}

#desktop .window.is-maximised {
  inset: 0;
  width: auto;
  max-height: none;
}

/* Nothing follows the pointer while it is being moved. */
#desktop .window.is-dragging {
  user-select: none;
}

#desktop .window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    var(--title-idle-from),
    var(--title-idle-to)
  );
  touch-action: none;
}

#desktop .window.is-focused .window-title {
  background: linear-gradient(
    90deg,
    var(--title-active-from),
    var(--title-active-to)
  );
}

#desktop .window-title-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#desktop .window-buttons {
  display: flex;
  gap: 2px;
  flex: none;
}

#desktop .window-button {
  width: 18px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: var(--chrome);
  color: #000;
  font: 700 10px/1 var(--ui-font);
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark);
}

#desktop .window-button:active {
  box-shadow:
    inset 1px 1px 0 var(--chrome-dark),
    inset -1px -1px 0 var(--chrome-white);
}

#desktop .window-button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

#desktop .window-body {
  flex: 1;
  margin-top: 3px;
  padding: 12px 14px;
  overflow: auto;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 var(--chrome-shadow),
    inset -1px -1px 0 var(--chrome-white),
    inset 2px 2px 0 var(--chrome-dark);
}

/* --- what the programs contain ---------------------------------------------- */

#desktop .program h2 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.3;
}

#desktop .program p {
  margin: 0 0 12px;
  font-size: var(--ui-size);
  line-height: 1.5;
}

#desktop .program a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--chrome);
  color: #000;
  text-decoration: none;
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark),
    inset 2px 2px 0 var(--chrome-light),
    inset -2px -2px 0 var(--chrome-shadow);
}

#desktop .program a:active {
  box-shadow:
    inset 1px 1px 0 var(--chrome-dark),
    inset -1px -1px 0 var(--chrome-white),
    inset 2px 2px 0 var(--chrome-shadow),
    inset -2px -2px 0 var(--chrome-light);
}

#desktop .program a:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

#desktop .program a svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* --- taskbar ---------------------------------------------------------------- */

#desktop .taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  box-sizing: border-box;
  background: var(--chrome);
  box-shadow: inset 0 1px 0 var(--chrome-white);
}

#desktop .taskbar-menu,
#desktop .taskbar-task {
  height: 24px;
  padding: 0 10px;
  border: none;
  background: var(--chrome);
  color: #000;
  font: inherit;
  text-align: left;
  box-shadow:
    inset 1px 1px 0 var(--chrome-white),
    inset -1px -1px 0 var(--chrome-dark),
    inset 2px 2px 0 var(--chrome-light),
    inset -2px -2px 0 var(--chrome-shadow);
}

#desktop .taskbar-menu {
  font-weight: 700;
  flex: none;
}

#desktop .taskbar-menu:active,
#desktop .taskbar-task.is-active {
  box-shadow:
    inset 1px 1px 0 var(--chrome-dark),
    inset -1px -1px 0 var(--chrome-white),
    inset 2px 2px 0 var(--chrome-shadow),
    inset -2px -2px 0 var(--chrome-light);
}

/* The window that has focus reads as held down, which is how you could tell. */
#desktop .taskbar-task.is-active {
  background: repeating-linear-gradient(
    45deg,
    var(--chrome) 0 2px,
    var(--chrome-light) 2px 4px
  );
}

#desktop .taskbar-tasks {
  flex: 1;
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

#desktop .taskbar-task {
  flex: 0 1 150px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#desktop .taskbar-menu:focus-visible,
#desktop .taskbar-task:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

#desktop .taskbar-clock {
  flex: none;
  min-width: 54px;
  padding: 4px 8px;
  text-align: center;
  background: var(--chrome);
  box-shadow:
    inset 1px 1px 0 var(--chrome-shadow),
    inset -1px -1px 0 var(--chrome-white),
    inset 2px 2px 0 var(--chrome-dark),
    inset -2px -2px 0 var(--chrome-light);
}

/* --- small screens ---------------------------------------------------------- */

/*
 * One window at a time, filling the desktop. Dragging a window around a phone
 * sized screen is a way to lose it rather than a way to arrange it, so the
 * window manager stops offering it below this width too.
 */
/*
 * Touch. Every control here was drawn for a mouse pointer a few pixels wide,
 * which is no use to a fingertip, so the ones you have to hit grow. The
 * proportions stay; only the targets change.
 */
@media (pointer: coarse) {
  #desktop .window-button {
    width: 30px;
    height: 26px;
    font-size: 12px;
  }

  #desktop .window-title {
    padding: 4px 4px 4px 8px;
  }

  #desktop .taskbar-menu,
  #desktop .taskbar-task {
    height: 32px;
  }
}

@media (max-width: 719px) {
  #desktop {
    --taskbar-h: 40px;
  }

  /* Maximise does nothing here, because a window is already the desktop. */
  #desktop .window-button[data-action="maximise"] {
    display: none;
  }

  #desktop .window {
    inset: 0;
    width: auto;
    max-height: none;
  }

  #desktop .desktop-icon {
    width: 76px;
  }
}