Add study sessions and timeline

src/App.css

@@ -342,34 +342,38 @@ textarea:focus-visible {
 }
 
 .original-language-verse p {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
   margin: 0;
 }
 
-.lemma-token {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 5px;
-  padding: 5px 7px;
-  border-color: #d4c9b3;
-  background: #fbf3df;
+.lemma-line-text {
   color: #1f211e;
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: 15px;
-  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.7;
 }
 
-.lemma-token small {
-  color: #735c0f;
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 9px;
+.lemma-line-text[dir='rtl'] {
+  direction: rtl;
+  text-align: right;
+  unicode-bidi: isolate;
 }
 
-.lemma-token.active {
-  border-color: #2f6f5e;
-  background: #e7f0eb;
+.lemma-word {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.lemma-word + .lemma-word {
+  margin-inline-start: 0.35em;
+}
+
+.lemma-word:hover,
+.lemma-word:focus-visible,
+.lemma-word.active {
+  background: rgba(47, 111, 94, 0.16);
+  outline: none;
 }
 
 .linked-word-list {
@@ -444,6 +448,23 @@ textarea:focus-visible {
   gap: 14px;
 }
 
+.session-manager {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
+  gap: 8px;
+  align-items: end;
+}
+
+.session-manager label {
+  display: grid;
+  gap: 4px;
+  color: #657061;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
 .tag-editor,
 .reader-tags {
   display: flex;
@@ -496,6 +517,7 @@ textarea:focus-visible {
   color: #3f443d;
   font-size: 14px;
   line-height: 1.42;
+  cursor: pointer;
 }
 
 .footnote-list p span {
@@ -505,6 +527,84 @@ textarea:focus-visible {
   font-weight: 800;
 }
 
+.footnote-list p:hover,
+.footnote-list p:focus-visible {
+  color: #202124;
+  outline: none;
+  text-decoration: underline;
+  text-decoration-color: #d6a84f;
+  text-underline-offset: 3px;
+}
+
+.session-timeline {
+  display: grid;
+  gap: 10px;
+  padding-top: 2px;
+}
+
+.session-timeline header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.session-timeline header strong {
+  color: #657061;
+  font-size: 12px;
+}
+
+.session-timeline ol {
+  display: grid;
+  gap: 6px;
+  max-height: 240px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.session-timeline li {
+  margin: 0;
+}
+
+.session-timeline li button {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  gap: 4px 8px;
+  width: 100%;
+  padding: 8px 9px;
+  border-color: #ded6c7;
+  background: #fbf8ef;
+  color: #202124;
+  text-align: left;
+}
+
+.session-timeline li button:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.session-timeline li button span,
+.session-timeline li button small {
+  color: #657061;
+  font-size: 11px;
+}
+
+.session-timeline li button small {
+  grid-column: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-timeline p {
+  margin: 0;
+  color: #657061;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
 .status-panel.error {
   border-color: #b42318;
   color: #b42318;