Refine page reader controls and compare view

src/App.css

@@ -39,7 +39,7 @@
 
 .reader {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 16px;
   min-width: 0;
   height: 100vh;
@@ -49,8 +49,8 @@
 
 .top-bar {
   display: grid;
-  grid-template-columns: minmax(260px, 1fr) minmax(320px, 520px);
-  gap: 18px;
+  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.1fr) minmax(300px, 0.65fr);
+  gap: 14px;
   align-items: end;
 }
 
@@ -83,6 +83,7 @@
 }
 
 input,
+select,
 textarea {
   width: 100%;
   min-width: 0;
@@ -116,35 +117,49 @@ button {
 
 button:focus-visible,
 input:focus-visible,
+select:focus-visible,
 textarea:focus-visible {
   outline: 2px solid #5d7f71;
   outline-offset: 2px;
 }
 
+.page-controls {
+  display: grid;
+  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr);
+  gap: 8px;
+  align-items: end;
+}
+
+.page-controls label {
+  display: grid;
+  gap: 4px;
+  color: #657061;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
 .study-desk {
   display: grid;
-  grid-template-columns: minmax(520px, 1.3fr) minmax(220px, 0.38fr) minmax(320px, 0.7fr);
+  grid-template-columns: minmax(720px, 1fr);
   gap: 16px;
   min-height: 0;
 }
 
-.study-desk.page {
-  grid-template-columns: minmax(680px, 980px);
+.study-desk.page,
+.study-desk.study,
+.study-desk.compare {
+  grid-template-columns: minmax(680px, 1160px);
   justify-content: center;
 }
 
-.study-desk.study {
-  grid-template-columns: minmax(560px, 1fr) minmax(260px, 360px);
-}
-
 .study-desk.notes {
-  grid-template-columns: minmax(520px, 1.3fr) minmax(220px, 0.38fr) minmax(320px, 0.7fr);
+  grid-template-columns: minmax(760px, 1.42fr) minmax(320px, 0.58fr);
 }
 
-.bible-page,
-.study-margin,
+.page-system,
 .notes-workspace,
-.footnote-strip,
 .status-panel {
   border: 1px solid #d4cdbd;
   border-radius: 8px;
@@ -152,6 +167,23 @@ textarea:focus-visible {
   box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
 }
 
+.page-system {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.page-system.study,
+.page-system.notes {
+  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
+}
+
+.page-system.compare-system {
+  display: block;
+}
+
 .bible-page {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -222,6 +254,11 @@ textarea:focus-visible {
   padding: 16px;
 }
 
+.study-margin {
+  border-left: 1px solid #e4dece;
+  background: #fbf8ef;
+}
+
 .panel-header {
   display: flex;
   justify-content: space-between;
@@ -347,9 +384,12 @@ textarea:focus-visible {
 
 .footnote-strip {
   display: flex;
+  grid-column: 1 / -1;
   gap: 12px;
   align-items: center;
   min-height: 46px;
+  border-top: 1px solid #e4dece;
+  background: #fbf8ef;
 }
 
 .footnote-strip span {
@@ -361,11 +401,57 @@ textarea:focus-visible {
   color: #b42318;
 }
 
+.compare-pages {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: 0;
+}
+
+.compare-pages .bible-page + .bible-page {
+  border-left: 1px solid #e4dece;
+}
+
+.compare-placeholder {
+  align-content: start;
+  gap: 24px;
+  background: #fbf8ef;
+}
+
+.compare-placeholder h2 {
+  margin: 0 0 10px;
+  color: #252821;
+  font-size: 22px;
+  letter-spacing: 0;
+}
+
+.compare-placeholder p {
+  max-width: 36rem;
+  margin: 0;
+  color: #657061;
+  font-size: 15px;
+  line-height: 1.55;
+}
+
 @media (max-width: 1200px) {
-  .study-desk {
+  .study-desk,
+  .study-desk.notes,
+  .study-desk.study,
+  .study-desk.compare {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .page-system.study,
+  .page-system.notes,
+  .compare-pages {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .study-margin,
+  .compare-pages .bible-page + .bible-page {
+    border-top: 1px solid #e4dece;
+    border-left: 0;
+  }
+
   .reader {
     height: auto;
     min-height: 100vh;
@@ -390,6 +476,10 @@ textarea:focus-visible {
     grid-template-columns: 1fr;
   }
 
+  .page-controls {
+    grid-template-columns: 1fr 1fr;
+  }
+
   .page-columns {
     column-count: 1;
   }