xP: resolve various issues, mostly in styling

xP/public/xP.css

@@ -3,7 +3,6 @@ body {
 	padding: 0;
 	font-family: sans-serif;
 }
-
 .xP {
 	height: 100vh;
 	display: flex;
@@ -12,13 +11,35 @@ body {
 }
 
 .title, .status {
-	background: #f8f8f8;
-	border-bottom: 1px solid #ccc;
 	padding: .05rem .3rem;
+	background: #eee;
+
+	position: relative;
+	border-top: 3px solid #ccc;
+	border-bottom: 2px solid #888;
+}
+.title:before, .status:before {
+	content: " ";
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 2px;
+	top: -2px;
+	background: #fff;
+}
+.title:after, .status:after {
+	content: " ";
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 1px;
+	bottom: -1px;
+	background: #ccc;
 }
 .title {
 	display: flex;
 	justify-content: space-between;
+	align-items: baseline;
 }
 
 .middle {
@@ -38,7 +59,12 @@ body {
 	cursor: default;
 }
 .item.active {
-	font-weight: bold;
+	font-style: italic;
+	background: #f8f8f8;
+	border-top: 1px solid #eee;
+	border-bottom: 1px solid #eee;
+	margin-top: -1px;
+	margin-bottom: -1px;
 }
 
 /* Only Firefox currently supports align-content: safe end, thus this. */
@@ -115,11 +141,14 @@ body {
 	font-family: monospace;
 }
 
-.status {
-	border-top: 2px solid #fff;
-}
-
 textarea {
+	font: inherit;
 	padding: .05rem .3rem;
-	font-family: inherit;
+	margin: 0;
+	border: 2px inset #eee;
+	flex-shrink: 0;
+}
+textarea:focus {
+	outline: none;
+	border-color: #ff5f00;
 }