/* The demo shell: a desktop, a menu bar, macOS-chromed windows. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; user-select: none;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #d6dde4;
  background:
    radial-gradient(1200px 800px at 70% -10%, #1b2a3f 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, #14232e 0%, transparent 55%),
    #0b1016;
}

#menubar {
  position: fixed; inset: 0 0 auto 0; height: 30px; z-index: 10000;
  display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: rgba(16, 22, 30, 0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12.5px;
}
#brand { font-weight: 700; letter-spacing: .2px; color: #fff; }
#menubar button {
  all: unset; cursor: pointer; padding: 3px 9px; border-radius: 5px; color: #cfe0f0;
}
#menubar button:hover { background: rgba(255,255,255,0.09); }
.mlink { color: #9db7d0; text-decoration: none; padding: 3px 9px; border-radius: 5px; }
.mlink:hover { background: rgba(255,255,255,0.09); }
#status { margin-left: auto; color: #7f8ea0; font-variant-numeric: tabular-nums; }

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

.win {
  position: absolute; min-width: 220px;
  border-radius: 10px; overflow: hidden;
  background: #10161d;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
}
.win.focused { border-color: rgba(255,255,255,0.16);
  box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.4); }

.tbar {
  height: 30px; flex: 0 0 30px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; cursor: default;
  background: linear-gradient(rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lights { display: flex; gap: 7px; }
.light { width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0; cursor: pointer; }
.light.close { background: #ff5f57; }
.light.close:hover { filter: brightness(1.15); }
.light.close:disabled { background: #3a4450; cursor: default; }
.light.zoom { background: #28c840; }
.light.zoom:hover { filter: brightness(1.15); }
.ttitle { flex: 1; text-align: center; color: #aab8c6; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar .pid { color: #5b6a7a; font-size: 11px; }

.wbody { position: relative; flex: 1; min-height: 0; background: #0d1117; }
.wbody .term { position: absolute; inset: 0; padding: 6px 2px 6px 8px; }
.wbody canvas {
  display: block; image-rendering: pixelated; background: #fff;
}
.win.drawwin .wbody { background: #0d1117; }

/* xterm cosmetics */
.xterm { height: 100%; }
.xterm .xterm-viewport { background: transparent !important; }

/* resize grip (text windows) */
.grip {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 5;
  background:
    linear-gradient(135deg, transparent 0 55%, rgba(255,255,255,0.25) 55% 62%, transparent 62% 75%, rgba(255,255,255,0.25) 75% 82%, transparent 82%);
  border-bottom-right-radius: 10px;
}

.mswitch { display: flex; gap: 2px; margin-right: 6px; }
.mswitch button {
  all: unset; cursor: pointer; width: 18px; height: 16px; text-align: center;
  font-size: 10.5px; color: #93a5b8; background: rgba(255,255,255,0.06);
  border-radius: 4px; line-height: 16px;
}
.mswitch button.on { background: #2d5f8f; color: #fff; }
.mswitch button:hover { background: rgba(255,255,255,0.14); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: rgba(20, 28, 38, 0.92); border: 1px solid rgba(255,255,255,0.1);
  color: #cfe0f0; padding: 8px 14px; border-radius: 8px; z-index: 10001;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); font-size: 12.5px;
}

/* the heritage exhibit's wing of the menu: present, honest, slightly aside */
#menubar .msep { color: #667; font-size: 11px; margin-left: 14px; margin-right: 2px; cursor: default; }
#menubar button.heritage { opacity: 0.72; }
#menubar button.heritage:hover { opacity: 1; }

#menubar select { background: #1a1d24; color: #cfd6e4; border: 1px solid #2a2f3a;
  border-radius: 4px; font: inherit; font-size: 12px; margin-left: 14px; padding: 1px 4px; }