/* A 1988 desktop, redrawn: one-bit black and white, every pixel doubled
   (--u). Original artwork; the type is the emulator's own 5x7 font. */

:root { --u: 2px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; color: #000; }
body { font: 14px monospace; user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
a { color: inherit; }

/* Pixel type: canvases of the 5x7 glyphs, black on clear; inverse by filter. */
canvas.px { display: inline-block; vertical-align: middle; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.inv canvas.px, canvas.px.inv { filter: invert(1); }

/* Menu bar */
#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: calc(12 * var(--u)); z-index: 100;
  display: flex; align-items: stretch; background: #fff; border-bottom: var(--u) solid #000;
  padding-left: calc(6 * var(--u));
}
.menu { position: relative; }
.menu > .title { display: flex; align-items: center; height: 100%; padding: 0 calc(5 * var(--u)); }
.menu.open > .title { background: #000; }
.menu.open > .title canvas.px { filter: invert(1); }
.menu > ul {
  display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: var(--u) 0; list-style: none;
  min-width: calc(110 * var(--u)); background: #fff; border: var(--u) solid #000;
  box-shadow: var(--u) var(--u) 0 #000;
}
.menu.open > ul { display: block; }
.menu li { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); height: calc(12 * var(--u)); padding: 0 calc(6 * var(--u)); white-space: nowrap; }
.menu li:not(.sep):not(.disabled):hover { background: #000; }
.menu li:not(.sep):not(.disabled):hover canvas.px { filter: invert(1); }
.menu li.sep { height: 0; padding: 0; margin: calc(3 * var(--u)) 0; border-top: var(--u) dotted #000; }
.menu li.disabled canvas.px { opacity: .35; }
.menu li .mark { width: calc(6 * var(--u)); }

/* Desktop: the 640-mode gray, a pixel on and a pixel off. */
#desktop {
  position: absolute; inset: calc(12 * var(--u)) 0 0 0;
  background: repeating-linear-gradient(90deg, #000 0 var(--u), #fff var(--u) calc(2 * var(--u)));
}
#desktop.drop { outline: calc(2 * var(--u)) dashed #000; outline-offset: calc(-4 * var(--u)); }
.icons {
  position: absolute; top: calc(8 * var(--u)); right: calc(6 * var(--u)); bottom: calc(6 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: calc(64 * var(--u));
}
.icon { display: flex; flex-direction: column; align-items: center; gap: var(--u); outline: none; }
.icon svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.icon .label { background: #fff; padding: 0 var(--u); }
.icon.selected svg, .icon.over svg { filter: invert(1); }
.icon.selected .label, .icon.over .label { background: #000; }
.icon.selected .label canvas.px, .icon.over .label canvas.px { filter: invert(1); }
.icon.trash { margin-top: auto; }
.icon.empty svg { opacity: .55; }

/* Windows */
.window {
  position: absolute; background: #fff; border: var(--u) solid #000;
  box-shadow: var(--u) var(--u) 0 #000; min-width: calc(160 * var(--u));
}
.titlebar {
  display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(12 * var(--u));
  padding: 0 calc(3 * var(--u)); border-bottom: var(--u) solid #000;
  background: repeating-linear-gradient(#fff 0 var(--u), #000 var(--u) calc(2 * var(--u))) content-box;
  background-clip: content-box; padding-block: calc(2 * var(--u));
}
.window:not(.front) .titlebar { background: #fff; }
.titlebar .name { margin: 0 auto; background: #fff; padding: 0 calc(4 * var(--u)); }
.titlebar .close, .titlebar .zoom, .titlebar .zoom-pad {
  width: calc(9 * var(--u)); height: calc(8 * var(--u)); background: #fff; border: var(--u) solid #000;
  box-shadow: 0 0 0 var(--u) #fff; flex: none;
}
.titlebar .zoom-pad { visibility: hidden; }
.titlebar .zoom { position: relative; }
.titlebar .zoom::after { content: ""; position: absolute; left: 0; top: 0; width: 55%; height: 55%; border-right: var(--u) solid #000; border-bottom: var(--u) solid #000; }
.window:not(.front) .titlebar .close, .window:not(.front) .titlebar .zoom { visibility: hidden; }
.infobar { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); padding: var(--u) calc(5 * var(--u)); border-bottom: var(--u) solid #000; min-height: calc(11 * var(--u)); }
.body { padding: calc(6 * var(--u)) calc(8 * var(--u)); }
.body p { margin: 0 0 calc(3 * var(--u)); }
.links { list-style: none; margin: calc(4 * var(--u)) 0; padding: 0; }
.links li { margin-bottom: calc(4 * var(--u)); }
.links a, a.linkish { text-decoration: none; border-bottom: var(--u) dotted #000; }
.links a:hover, a.linkish:hover { background: #000; }
.links a:hover canvas.px, a.linkish:hover canvas.px { filter: invert(1); }
.links .sub { display: block; margin-left: calc(10 * var(--u)); opacity: .7; }

/* The machine */
.screen { position: relative; display: flex; justify-content: center; background: #000; line-height: 0; }
#canvas { display: block; image-rendering: pixelated; outline: none; }
#canvas.nocursor { cursor: none; }
.screen:fullscreen { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; }
.off {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(8 * var(--u)); background: #fff; line-height: normal;
}
.summary { display: grid; grid-template-columns: auto auto; gap: calc(2 * var(--u)) calc(8 * var(--u)); }
.note { opacity: .7; margin: 0; }
.strip { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); padding: calc(4 * var(--u)); border-top: var(--u) solid #000; }
.hint { margin: 0; padding: 0 calc(4 * var(--u)) calc(4 * var(--u)); opacity: .7; }
#win-machine:not(.running) .strip .btn:not([data-act="joystick"]) { opacity: .35; pointer-events: none; }

/* Buttons: round-cornered, the default one ringed. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: calc(40 * var(--u));
  height: calc(13 * var(--u)); padding: 0 calc(6 * var(--u)); background: #fff;
  border: var(--u) solid #000; border-radius: calc(6 * var(--u));
}
.btn:active, .btn.on { background: #000; }
.btn:active canvas.px, .btn.on canvas.px { filter: invert(1); }
.btn.default { box-shadow: 0 0 0 var(--u) #fff, 0 0 0 calc(3 * var(--u)) #000; border-radius: calc(7 * var(--u)); margin: calc(3 * var(--u)); }
.btn:disabled { opacity: .35; }

/* Dialogs: a modal with a heavy double frame. */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(30 * var(--u)); }
.dialog {
  background: #fff; border: var(--u) solid #000; padding: calc(4 * var(--u));
  box-shadow: var(--u) var(--u) 0 #000; max-height: calc(100vh - 40 * var(--u)); overflow: auto;
}
.dialog > .inner { border: calc(3 * var(--u)) solid #000; outline: var(--u) solid #000; outline-offset: calc(2 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); margin: calc(3 * var(--u)); }
.dialog h2 { margin: 0 0 calc(4 * var(--u)); padding-bottom: calc(2 * var(--u)); border-bottom: var(--u) solid #000; font-size: inherit; }
.dialog .cols { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; flex-wrap: wrap; }
.dialog .buttons { display: flex; justify-content: flex-end; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.dialog .buttons .spacer { margin-right: auto; }
fieldset { border: var(--u) dotted #000; margin: 0 0 calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); }
legend { padding: 0 calc(2 * var(--u)); }
.row { display: flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(11 * var(--u)); }
input[type=text] { font: 14px monospace; border: var(--u) solid #000; padding: var(--u) calc(2 * var(--u)); width: 100%; margin-bottom: calc(3 * var(--u)); }

/* Checkboxes cross, radio buttons dot: the inputs are real, the look is drawn. */
.check, .radio { display: flex; align-items: center; gap: calc(4 * var(--u)); min-height: calc(11 * var(--u)); position: relative; }
.check input, .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box, .radio .box { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border: var(--u) solid #000; background: #fff; }
.radio .box { border-radius: 50%; }
.check input:checked + .box {
  background:
    linear-gradient(45deg, transparent calc(50% - var(--u) * .75), #000 calc(50% - var(--u) * .75) calc(50% + var(--u) * .75), transparent calc(50% + var(--u) * .75)),
    linear-gradient(-45deg, transparent calc(50% - var(--u) * .75), #000 calc(50% - var(--u) * .75) calc(50% + var(--u) * .75), transparent calc(50% + var(--u) * .75)), #fff;
}
.radio input:checked + .box { box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #fff, inset 0 0 0 calc(5 * var(--u)) #000; }
.check input:focus-visible + .box, .radio input:focus-visible + .box { outline: var(--u) dotted #000; outline-offset: var(--u); }
input[type=range] { width: calc(46 * var(--u)); accent-color: #000; }

.list { border: var(--u) solid #000; min-height: calc(36 * var(--u)); max-height: calc(60 * var(--u)); overflow: auto; margin-bottom: calc(3 * var(--u)); }
.list > div { padding: 0 calc(3 * var(--u)); min-height: calc(11 * var(--u)); display: flex; align-items: center; }
.list > div.sel { background: #000; }
.list > div.sel canvas.px { filter: invert(1); }

@media (max-width: 900px), (max-height: 600px) { :root { --u: 1.5px; } }

/* Pop-up menus: a shadowed box with a down-pointing mark; the list opens over it. */
.popup {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(12 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(4 * var(--u)); background: #fff; position: relative;
  border: var(--u) solid #000; box-shadow: var(--u) var(--u) 0 #000;
}
.popup::after {
  content: ""; position: absolute; right: calc(3 * var(--u)); top: calc(50% - 1.5 * var(--u));
  border: calc(3 * var(--u)) solid transparent; border-top-color: #000; border-bottom: 0;
}
.popup-list {
  position: fixed; z-index: 300; margin: 0; padding: var(--u) 0; list-style: none; background: #fff;
  border: var(--u) solid #000; box-shadow: var(--u) var(--u) 0 #000; max-height: 70vh; overflow: auto;
}
.popup-list li { display: flex; align-items: center; height: calc(12 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(6 * var(--u)); white-space: nowrap; }
.popup-list li.sel { box-shadow: inset calc(2 * var(--u)) 0 0 #000; }
.popup-list li:hover { background: #000; }
.popup-list li:hover canvas.px { filter: invert(1); }

/* The board editor: one fault per row, where it is underneath. */
.faults { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-bottom: calc(4 * var(--u)); max-height: 50vh; overflow: auto; }
.fault { border-bottom: var(--u) dotted #000; padding-bottom: calc(3 * var(--u)); }
.fault .row { flex-wrap: wrap; }
.fault .where { opacity: .7; margin: var(--u) 0 0; }
.btn.small { min-width: 0; padding: 0 calc(4 * var(--u)); }