sidebar layout

switch the app from floating panels to a static sidebar on the right with resizable tools
expect more layout bugs from now on

static/base.css

@@ -18,6 +18,9 @@
     --font-monospace: "Iosevka Hyperlegible", monospace;
     --line-height: 1.5;
     --line-height-em: 1.5em;
+
+    --z-resize-handle: 50;
+    --z-modal: 100;
 }
 
 /* Reset */
@@ -92,6 +95,10 @@ button.icon {
 input {
     border: none;
     border-bottom: 1px solid var(--color-panel-border);
+
+    &:hover:not(:focus) {
+        background-color: var(--color-shaded-background);
+    }
 }
 
 *:focus-visible {
@@ -101,14 +108,23 @@ input {
 
 /* Modal dialogs */
 
+dialog {
+    &:not([open]) {
+        /* Default to dialogs being invisible.
+           Otherwise dialogs placed on the page via HTML display on top of everything. */
+        display: none;
+    }
+
+    &::backdrop {
+        background-color: var(--dialog-backdrop);
+        backdrop-filter: blur(8px);
+    }
+}
+
 dialog:not([open]) {
-    /* Weird this doesn't seem to work by default. */
-    display: none;
 }
 
 dialog::backdrop {
-    background-color: var(--dialog-backdrop);
-    backdrop-filter: blur(8px);
 }
 
 /* Details */
@@ -217,8 +233,6 @@ abbr {
 
 .icon {
     vertical-align: middle;
-    width: 16px;
-    height: 16px;
 
     background-repeat: no-repeat;
     background-position: 50% 50%;