Refine rail and book tab layout

src/App.css

@@ -7,7 +7,7 @@
 }
 
 .app-shell.menu-open .reader {
-  filter: brightness(0.72);
+  filter: blur(1.5px) brightness(0.62) saturate(0.72);
 }
 
 .tool-rail {
@@ -35,6 +35,7 @@
 
 .brand-mark {
   display: grid;
+  flex: 0 0 auto;
   place-items: center;
   width: 42px;
   height: 42px;
@@ -67,6 +68,7 @@
 .menu-button {
   flex: 0 0 auto;
   justify-content: center;
+  align-self: center;
 }
 
 .menu-button span {
@@ -82,6 +84,19 @@
   gap: 4px;
 }
 
+.tool-rail:hover .menu-button,
+.tool-rail:focus-within .menu-button {
+  width: 42px;
+  padding: 0;
+}
+
+.app-identity {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-height: 42px;
+}
+
 .rail-icon {
   display: grid;
   flex: 0 0 18px;
@@ -116,6 +131,23 @@
   margin-top: auto;
 }
 
+.rail-description {
+  display: none;
+  margin: 0;
+  padding: 12px;
+  border: 1px solid #3c4239;
+  border-radius: 6px;
+  background: #252b25;
+  color: #d9ddd4;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.tool-rail:hover .rail-description,
+.tool-rail:focus-within .rail-description {
+  display: block;
+}
+
 .reader {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
@@ -266,13 +298,13 @@ textarea:focus-visible {
 
 .bible-page {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
   padding: 26px 30px;
 }
 
 .bible-page header,
-.bible-page footer {
+.page-turner {
   display: flex;
   justify-content: space-between;
   gap: 16px;
@@ -283,13 +315,15 @@ textarea:focus-visible {
   text-transform: uppercase;
 }
 
-.bible-page footer {
-  padding-top: 16px;
+.page-turner {
+  grid-column: 1 / -1;
+  padding: 14px 30px;
   border-top: 1px solid #e8e2d4;
+  background: #fffef8;
   text-transform: none;
 }
 
-.bible-page footer span {
+.page-turner span {
   color: #6b675d;
   font-size: 13px;
   font-weight: 700;
@@ -687,26 +721,30 @@ textarea:focus-visible {
 }
 
 .book-tabs {
-  display: flex;
+  display: grid;
   grid-column: 1 / -1;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
   gap: 3px;
   align-items: flex-start;
   padding: 0 16px 10px;
-  overflow-x: auto;
+  overflow: hidden;
   background: #ece9df;
 }
 
 .book-tabs button {
-  min-width: 44px;
+  min-width: 0;
   height: 30px;
-  padding: 4px 7px;
+  padding: 4px 3px;
   border-color: #c8bea9;
   border-top: 0;
   border-radius: 0 0 7px 7px;
   background: #efe4c9;
   color: #4c422f;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 800;
+  line-height: 1.05;
+  white-space: normal;
+  overflow-wrap: anywhere;
   box-shadow: 0 5px 10px rgba(44, 48, 42, 0.08);
 }