Change settings button position

src/styles/_rail.scss

@@ -159,6 +159,58 @@
 	white-space: nowrap;
 }
 
+/* The page nobody has written on yet.
+ *
+ * Shaped like a tab, because that is what it becomes the moment something is
+ * written on it - but a short one, drawn in outline: there is no date to stamp
+ * on it and no day for it to take a dye from. It stands in the stack directly
+ * after the last tab, which is where its own tab will be.
+ */
+.rail__new {
+	flex: 0 0 auto;
+	align-self: flex-start;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 4.75rem;
+	min-height: 1.9rem;
+	//The list's own gap sets it off from the last tab
+	margin-left: calc(-1 * var.$tab-tuck);
+	padding-left: var.$tab-tuck;
+
+	color: color.$ink-faint;
+	background-color: rgba(251, 241, 220, 0.5);
+	//No left edge: like a tab, it comes out from under the page block
+	border: 1px dashed color.$paper-deep;
+	border-left: 0;
+	border-radius: 0 var.$block-radius var.$block-radius 0;
+
+	transition: transform var.$trans-mid ease-out, background-color var.$trans-quick, color var.$trans-quick;
+
+	&:hover,
+	&:focus-visible {
+		transform: translateX(0.45rem);
+		background-color: color.$paper;
+		color: color.$ink-soft;
+	}
+}
+
+/* The book is open at that page, so the + is doing a bookmark's job - and wears
+ * the same ribbon the tab of the page being written on would. */
+.rail__new--current {
+	transform: translateX(0.3rem);
+	color: color.$ink-soft;
+	background-color: color.$paper;
+	border-style: solid;
+	border-color: color.$paper-edge;
+	box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.22), inset -0.2rem 0 0 color.$ribbon;
+
+	&:hover,
+	&:focus-visible {
+		transform: translateX(0.65rem);
+	}
+}
+
 /* The rail shows a few tabs either side of where the reading is. These two
  * say the book carries on past them, and walk the window along. */
 .rail__more {