Add session modal and book tabs

src/App.css

@@ -6,14 +6,31 @@
   color: #202124;
 }
 
+.app-shell.menu-open .reader {
+  filter: brightness(0.72);
+}
+
 .tool-rail {
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
+  position: relative;
+  z-index: 20;
+  width: 58px;
   padding: 18px 10px;
   background: #1f231f;
   border-right: 1px solid #d1cab9;
+  box-sizing: border-box;
+  transition: width 160ms ease, box-shadow 160ms ease;
+  overflow: hidden;
+}
+
+.tool-rail:hover,
+.tool-rail:focus-within {
+  width: 270px;
+  align-items: stretch;
+  box-shadow: 18px 0 40px rgba(17, 20, 17, 0.26);
 }
 
 .brand-mark {
@@ -29,12 +46,74 @@
 }
 
 .tool-rail button {
+  display: flex;
+  gap: 12px;
+  align-items: center;
   width: 38px;
   height: 38px;
   padding: 0;
   border-color: #3c4239;
   background: #2c302a;
   color: #f6f3eb;
+  white-space: nowrap;
+}
+
+.tool-rail:hover button,
+.tool-rail:focus-within button {
+  width: 100%;
+  padding: 0 10px;
+}
+
+.menu-button {
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+.menu-button span {
+  display: block;
+  width: 16px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.menu-button {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rail-icon {
+  display: grid;
+  flex: 0 0 18px;
+  place-items: center;
+  font-weight: 800;
+}
+
+.rail-copy {
+  display: none;
+  min-width: 0;
+  text-align: left;
+}
+
+.tool-rail:hover .rail-copy,
+.tool-rail:focus-within .rail-copy {
+  display: grid;
+}
+
+.rail-copy strong,
+.rail-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rail-copy small {
+  color: #b9c0b4;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.rail-bottom {
+  margin-top: auto;
 }
 
 .reader {
@@ -45,6 +124,7 @@
   height: 100vh;
   padding: 18px;
   box-sizing: border-box;
+  transition: filter 160ms ease;
 }
 
 .top-bar {
@@ -172,7 +252,7 @@ textarea:focus-visible {
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr) auto;
   min-height: 0;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .page-system.study,
@@ -494,9 +574,10 @@ textarea:focus-visible {
   grid-column: 1 / -1;
   gap: 12px;
   align-items: flex-start;
-  min-height: 46px;
-  border-top: 1px solid #e4dece;
-  background: #fbf8ef;
+  min-height: 50px;
+  border-top: 1px solid #e7dfcf;
+  background: #fffef8;
+  box-shadow: inset 0 8px 16px rgba(44, 48, 42, 0.03);
 }
 
 .footnote-strip strong {
@@ -605,6 +686,199 @@ textarea:focus-visible {
   line-height: 1.45;
 }
 
+.book-tabs {
+  display: flex;
+  grid-column: 1 / -1;
+  gap: 3px;
+  align-items: flex-start;
+  padding: 0 16px 10px;
+  overflow-x: auto;
+  background: #ece9df;
+}
+
+.book-tabs button {
+  min-width: 44px;
+  height: 30px;
+  padding: 4px 7px;
+  border-color: #c8bea9;
+  border-top: 0;
+  border-radius: 0 0 7px 7px;
+  background: #efe4c9;
+  color: #4c422f;
+  font-size: 11px;
+  font-weight: 800;
+  box-shadow: 0 5px 10px rgba(44, 48, 42, 0.08);
+}
+
+.book-tabs button:nth-child(4n + 2) {
+  height: 34px;
+}
+
+.book-tabs button:nth-child(4n + 3) {
+  height: 27px;
+}
+
+.book-tabs button:hover,
+.book-tabs button:focus-visible,
+.book-tabs button.active {
+  background: #d6a84f;
+  color: #151510;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(18, 21, 18, 0.46);
+}
+
+.modal-panel {
+  display: grid;
+  gap: 18px;
+  width: min(920px, 100%);
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  padding: 22px;
+  border: 1px solid #d4cdbd;
+  border-radius: 8px;
+  background: #fffef8;
+  box-shadow: 0 22px 60px rgba(18, 21, 18, 0.3);
+}
+
+.modal-panel > header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: start;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #e7dfcf;
+}
+
+.modal-panel h2,
+.modal-panel h3 {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.modal-panel h2 {
+  font-size: 24px;
+}
+
+.modal-panel h3 {
+  font-size: 16px;
+}
+
+.close-button {
+  background: #2c302a;
+  color: #fffef8;
+}
+
+.modal-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+}
+
+.modal-section {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+  padding: 16px;
+  border: 1px solid #e0d8c8;
+  border-radius: 8px;
+  background: #fbf8ef;
+}
+
+.modal-section label {
+  display: grid;
+  gap: 5px;
+  color: #657061;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.session-facts,
+.about-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.session-facts div,
+.about-list div {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.session-facts dt,
+.about-list dt {
+  color: #657061;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.session-facts dd,
+.about-list dd {
+  margin: 0;
+  color: #252821;
+  line-height: 1.45;
+}
+
+.resource-toggles {
+  display: grid;
+  gap: 8px;
+}
+
+.resource-toggles label {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  color: #252821;
+  font-size: 14px;
+  text-transform: none;
+}
+
+.resource-toggles input {
+  width: auto;
+}
+
+.resource-disabled {
+  margin: 0;
+  color: #657061;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.about-modal {
+  width: min(760px, 100%);
+}
+
+.about-modal p {
+  margin: 0;
+  color: #3f443d;
+  line-height: 1.6;
+}
+
+.about-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.about-links a {
+  border-radius: 6px;
+  padding: 9px 11px;
+  background: #2f6f5e;
+  color: white;
+  font-weight: 800;
+  text-decoration: none;
+}
+
 .status-panel.error {
   border-color: #b42318;
   color: #b42318;