Event editing dialog and many other event-related improvements.

events.css

@@ -1,35 +1,26 @@
-/* Event (per-cell, if used) */
-.event {
-  font-size: .75em;
-  padding: .1em .3em;
-  margin: .1em 0;
-  border-radius: .2em;
-  font-weight: 500;
-  white-space: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  max-width: calc(100% - .5em);
-  line-height: 1.2;
-  cursor: pointer;
-  z-index: 5;
-}
-
-/* Spanning events in the overlay (grid-positioned, not absolutely measured) */
 .event-span {
-  font-size: .75em;
+  font-size: clamp(.45em, 1.8vh, .75em);
   padding: 0 .5em;
   border-radius: .4em;
-  color: var(--inkstrong);
+  color: var(--strong);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2;
-  height: 1.2em;
-  align-self: center;     /* vertically center within the overlay row */
+  line-height: 1;         /* let the track height define the visual height */
+  height: 100%;           /* fill the grid row height */
+  align-self: stretch;    /* fill row vertically */
   justify-self: stretch;  /* stretch across chosen grid columns */
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   pointer-events: auto;   /* clickable despite overlay having none */
   z-index: 1;
 }
+
+/* Selection styles */
+.cell.selected {
+  background: var(--select);
+  box-shadow: 0 0 .1em var(--muted) inset;
+}
+.cell.selected .event { opacity: .7 }