/* System 7 desktop chrome. All sizes are in Mac pixels; #screen is scaled as a whole. */
@font-face { font-family: Chicago; src: url("../fonts/Chicago12.woff2") format("woff2"); }
@font-face { font-family: Geneva; src: url("../fonts/Geneva9.woff2") format("woff2"); }
@font-face { font-family: Monaco; src: url("../fonts/Monaco9.woff2") format("woff2"); }

:root {
  --black: #000;
  --white: #fff;
  --desk: #6d6d6d;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #000;
}
body { display: flex; align-items: center; justify-content: center; }

#screen {
  position: relative; width: 640px; height: 480px; flex: none;
  transform-origin: center center;
  /* Classic 50% grey desktop pattern */
  background-color: var(--desk);
  background-image:
    linear-gradient(45deg, #5a5a5a 25%, transparent 25%, transparent 75%, #5a5a5a 75%),
    linear-gradient(45deg, #5a5a5a 25%, transparent 25%, transparent 75%, #5a5a5a 75%);
  background-size: 2px 2px; background-position: 0 0, 1px 1px;
  font: 16px/16px Chicago, monospace;
  -webkit-font-smoothing: none; font-smooth: never;
  color: var(--black);
  user-select: none; cursor: default;
  overflow: hidden;
  border-radius: 6px;  /* rounded screen corners, as on a CRT-era Mac */
}
#screen canvas { image-rendering: pixelated; display: block; }

/* Menu bar */
#menubar {
  position: absolute; left: 0; top: 0; right: 0; height: 19px;
  background: var(--white); border-bottom: 1px solid var(--black);
  display: flex; z-index: 1000;
}
#menubar .title {
  padding: 0 9px; height: 19px; line-height: 19px; white-space: nowrap;
}
#menubar .title.apple { padding: 0 10px 0 14px; display: flex; align-items: center; }
#menubar .title.apple svg { display: block; }
#menubar .title.open { background: var(--black); color: var(--white); }
#menubar .title.open svg path { fill: var(--white); }
#menubar .title.disabled { color: #888; }
#menubar .clock { margin-left: auto; padding: 0 12px; line-height: 19px; }

.menu {
  position: absolute; background: var(--white); border: 1px solid var(--black);
  box-shadow: 1px 1px 0 var(--black); z-index: 1001; padding: 0 0 1px;
  min-width: 80px;
}
.menu .item {
  display: flex; height: 16px; line-height: 16px; padding: 0 6px 0 4px; white-space: nowrap;
}
.menu .item .mark { width: 12px; flex: none; }
.menu .item .text { flex: 1; padding-right: 24px; }
.menu .item .key { flex: none; min-width: 24px; text-align: left; }
.menu .item .arrow { flex: none; }
.menu .item.hilite { background: var(--black); color: var(--white); }
.menu .item.disabled { color: #999; }
.menu .sep { height: 0; border-top: 1px dotted #888; margin: 7px 0 8px; }

/* Windows */
.window {
  position: absolute; background: var(--white); border: 1px solid var(--black);
  box-shadow: 1px 1px 0 var(--black);
}
.window .titlebar {
  position: relative; height: 18px; border-bottom: 1px solid var(--black);
  background: repeating-linear-gradient(to bottom, var(--white) 0 1px, var(--black) 1px 2px) 0 3px / 100% 12px no-repeat,
              var(--white);
  background-clip: content-box; padding: 0 1px;
  text-align: center;
}
.window .titlebar .name {
  display: inline-block; background: var(--white); padding: 0 6px; height: 18px; line-height: 19px;
}
.window .titlebar .close {
  position: absolute; left: 8px; top: 3px; width: 11px; height: 11px; background: var(--white);
  border: 1px solid var(--black); box-shadow: 0 0 0 1px var(--white);
}
.window .titlebar .close.down { background: var(--black); }
.window.inactive .titlebar { background: var(--white); }
.window.inactive .titlebar .close { display: none; }
.window .content { position: relative; }

/* Modal dialogs */
#modal-cover { position: absolute; inset: 0; z-index: 900; }
.dialog { z-index: 950; }
.dialog.plain { border: 1px solid var(--black); padding: 0; box-shadow: none; }
.dialog.plain::before {
  content: ""; position: absolute; inset: 2px; border: 2px solid var(--black); pointer-events: none;
}
.dialog .content { overflow: hidden; }
.ditem { position: absolute; white-space: nowrap; }
.ditem.statictext { white-space: normal; line-height: 16px; }
.ditem.statictext.oneline { white-space: nowrap; }
/* The Chicago recreation runs about 4% wider than the real font. */
.dialog .content, .menu, #menubar { letter-spacing: -0.5px; }
.ditem.statictext.small { font-family: Geneva; }
.ditem.disabled-item { color: #888; }

.btn {
  box-sizing: border-box; border: 1px solid var(--black); border-radius: 8px; background: var(--white);
  text-align: center; line-height: 16px; display: flex; align-items: center; justify-content: center;
}
.btn.down { background: var(--black); color: var(--white); }
.btn.dim { color: #999; border-color: #999; }
.btn-default-ring {
  position: absolute; border: 3px solid var(--black); border-radius: 11px; pointer-events: none;
}

.radio, .check { display: flex; align-items: center; gap: 5px; line-height: 16px; }
.radio .box, .check .box {
  width: 10px; height: 10px; border: 1px solid var(--black); background: var(--white); flex: none;
  position: relative; margin-left: 1px;
}
.radio .box { border-radius: 50%; }
.radio.on .box::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--black);
}
.check.on .box::after, .check.on .box::before {
  content: ""; position: absolute; left: 4px; top: -2px; width: 1px; height: 14px; background: var(--black);
}
.check.on .box::after { transform: rotate(45deg); }
.check.on .box::before { transform: rotate(-45deg); }
.radio.down .box, .check.down .box { border-width: 2px; width: 8px; height: 8px; }
.radio.dim, .check.dim { color: #999; }
.radio.dim .box, .check.dim .box { border-color: #999; }

.edittext {
  box-sizing: border-box; border: 1px solid var(--black); outline: none; padding: 0 3px;
  font: inherit; background: var(--white); margin: -3px 0 0 -3px;
}
.edittext:disabled { color: #999; border-color: #999; }

.popup {
  box-sizing: border-box; border: 1px solid var(--black); box-shadow: 1px 1px 0 var(--black);
  background: var(--white); padding: 0 18px 0 6px; position: absolute; line-height: 16px;
}
.popup::after {
  content: ""; position: absolute; right: 5px; top: 6px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--black);
}

/* Scrolling list (Choose Map) */
.list {
  position: absolute; border: 1px solid var(--black); background: var(--white); overflow-y: scroll;
  box-sizing: border-box;
}
.list .row { padding: 0 4px; height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; }
.list .row.group { font-family: Geneva; color: #555; }
.list .row.sel { background: var(--black); color: var(--white); }
.list::-webkit-scrollbar { width: 16px; }
.list::-webkit-scrollbar-track {
  border-left: 1px solid var(--black);
  background-color: #ccc;
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 2px 2px; background-position: 0 0, 1px 1px;
}
.list::-webkit-scrollbar-thumb { background: var(--white); border: 1px solid var(--black); }

/* Balloon-free "About" text uses Geneva */
.geneva { font-family: Geneva; }