/* oddprocess: a System 7.5 desktop. */
:root {
  --grey: #dddddd;
  --dark: #888888;
  --ui: "Pixelify Sans", "Chicago", "ChicagoFLF", "Geneva", ui-monospace, monospace;
  --mono: "Monaco", "Geneva", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  font: 500 15px/1.2 var(--ui);
  color: #000;
  background: conic-gradient(#8e9bbd 25%, #6a79a3 0 50%, #8e9bbd 0 75%, #6a79a3 0) 0 0 / 4px 4px;
  -webkit-font-smoothing: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
button { font: inherit; color: inherit; cursor: default; }
a { color: inherit; }

/* rounded black screen corners */
.corner { position: fixed; width: 12px; height: 12px; z-index: 10000; pointer-events: none; background: #000; }
.corner.tl { top: 0; left: 0; -webkit-mask: radial-gradient(circle at 100% 100%, transparent 11px, #000 12px); mask: radial-gradient(circle at 100% 100%, transparent 11px, #000 12px); }
.corner.tr { top: 0; right: 0; -webkit-mask: radial-gradient(circle at 0 100%, transparent 11px, #000 12px); mask: radial-gradient(circle at 0 100%, transparent 11px, #000 12px); }
.corner.bl { bottom: 0; left: 0; -webkit-mask: radial-gradient(circle at 100% 0, transparent 11px, #000 12px); mask: radial-gradient(circle at 100% 0, transparent 11px, #000 12px); }
.corner.br { bottom: 0; right: 0; -webkit-mask: radial-gradient(circle at 0 0, transparent 11px, #000 12px); mask: radial-gradient(circle at 0 0, transparent 11px, #000 12px); }

/* menu bar */
.menubar {
  position: fixed; inset: 0 0 auto 0; height: 24px; z-index: 5000;
  display: flex; align-items: stretch; background: #fff; border-bottom: 1px solid #000;
}
.mt { border: 0; background: none; padding: 0 12px; display: flex; align-items: center; }
.mt.open, .mt:active { background: #000; color: #fff; }
.mt.apple { padding: 0 14px 0 12px; }
.mt.apple svg { width: 13px; height: 14px; fill: currentColor; shape-rendering: crispEdges; }
.clock { margin-left: auto; padding: 0 14px; display: flex; align-items: center; }
.menu {
  position: fixed; z-index: 5001; min-width: 190px; padding: 1px 0;
  background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; width: 100%; align-items: center; gap: 6px; text-align: left;
  border: 0; background: none; padding: 3px 18px 3px 22px; position: relative;
}
.menu button:hover:not(:disabled) { background: #000; color: #fff; }
.menu button:disabled { color: #999; }
.menu .tick { position: absolute; left: 7px; }
.menu hr { border: 0; border-top: 1px dotted #000; margin: 3px 0; }

/* desktop icons */
.icon {
  width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 4px 0; text-decoration: none; text-align: center;
  font-size: 13px; outline: none; -webkit-tap-highlight-color: transparent;
}
.icon canvas { width: 64px; height: 64px; image-rendering: pixelated; display: block; }
.icon span { padding: 1px 4px; max-width: 100%; }
.icon.sel canvas { filter: brightness(0.5) contrast(1.2); }
.icon.sel span, .icon:focus-visible span { background: #000; color: #fff; }
.desk { position: fixed; z-index: 1; }
.desk span { background: #fff; }
.desk.sel span { background: #000; }
#hd { top: 36px; right: 22px; }
#trash { bottom: 22px; right: 22px; }

/* windows */
.win {
  position: absolute; display: flex; flex-direction: column;
  background: var(--grey); border: 1px solid #000; box-shadow: 2px 2px 0 #000;
  min-width: 0;
}
.win[hidden] { display: none; }
.titlebar {
  position: relative; height: 21px; flex: none; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #000; background: #fff; touch-action: none;
}
.win.active .titlebar { background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px); background-position: 0 3px; }
.bw { background: var(--grey); padding: 0 5px; height: 100%; display: flex; align-items: center; margin: 0 4px; }
.win:not(.active) .bw { display: none; }
.box { width: 13px; height: 13px; padding: 0; border: 1px solid #000; background: #fff; position: relative; }
.box.zoom::after { content: ""; position: absolute; left: 1px; top: 1px; width: 6px; height: 6px; border: 1px solid #000; }
.ttl {
  position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
  display: flex; align-items: center; padding: 0 10px; background: var(--grey); white-space: nowrap; font-weight: 600;
}
.win:not(.active) .ttl { background: #fff; color: #777; }
.info {
  flex: none; display: flex; gap: 22px; padding: 2px 10px; font-size: 12px;
  border-bottom: 1px solid #000; background: var(--grey);
}
.main { flex: 1; display: flex; min-height: 0; background: #fff; }
.pane { flex: 1; overflow: auto; min-width: 0; }
.icons { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 14px 14px 20px; align-content: flex-start; }
.vbar { width: 17px; flex: none; border-left: 1px solid #000; display: flex; flex-direction: column; justify-content: space-between; background: conic-gradient(#fff 25%, #ccc 0 50%, #fff 0 75%, #ccc 0) 0 0 / 2px 2px; }
.vbar i, .hbar i.l, .hbar i.r { display: block; width: 16px; height: 16px; background: #fff; border: 0 solid #000; position: relative; flex: none; }
.vbar i.up { border-bottom-width: 1px; }
.vbar i.dn { border-top-width: 1px; }
.vbar i::after, .hbar i.l::after, .hbar i.r::after { content: ""; position: absolute; left: 4px; top: 5px; border: 4px solid transparent; }
.vbar i.up::after { border-bottom: 5px solid #000; border-top: 0; top: 5px; }
.vbar i.dn::after { border-top: 5px solid #000; border-bottom: 0; top: 6px; }
.hbar { flex: none; height: 17px; border-top: 1px solid #000; display: flex; background: conic-gradient(#fff 25%, #ccc 0 50%, #fff 0 75%, #ccc 0) 0 0 / 2px 2px; }
.hbar .fill { flex: 1; }
.hbar .grow { width: 17px; height: 16px; background: #fff; border-left: 1px solid #000; position: relative; flex: none; }
.hbar .grow::after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border: 1px solid #000; box-shadow: 3px 3px 0 -1px #fff, 3px 3px 0 0 #000; }
.doc {
  padding: 12px 16px 24px; font: 12px/1.5 var(--mono); user-select: text; -webkit-user-select: text; cursor: text;
}
.doc h1 { font: 600 14px/1.3 var(--mono); margin: 0 0 10px; }
.doc p { margin: 0 0 10px; }
.doc a { text-underline-offset: 2px; }

/* alert */
.overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.overlay[hidden] { display: none; }
.alert {
  width: min(400px, calc(100vw - 24px)); display: flex; gap: 16px; padding: 18px 18px 16px;
  background: var(--grey); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px var(--grey), inset 0 0 0 4px #000, 3px 3px 0 #000;
}
.alert canvas { width: 64px; height: 64px; flex: none; image-rendering: pixelated; }
.alert .msg { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.alert .msg b { font-weight: 600; display: block; margin-bottom: 4px; }
.alert .row { display: flex; justify-content: flex-end; margin-top: 14px; }
.btn {
  min-width: 68px; padding: 3px 14px; background: #fff; border: 1px solid #000; border-radius: 8px;
  box-shadow: 0 0 0 3px var(--grey), 0 0 0 4px #000; margin: 4px;
}
.btn:active { background: #000; color: #fff; }
.err { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

.restart { position: fixed; inset: 0; z-index: 9999; background: #000; }
.restart[hidden] { display: none; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .clock { display: none; }
  .mt { padding: 0 9px; }
  #hd { top: auto; bottom: 22px; right: auto; left: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .restart { transition: opacity .15s; }
}