big restructure

web/css/layout/app-shell.css

@@ -14,7 +14,15 @@ small {
 }
 
 div#debugger-bar {
-    display: none;
+  display: none;
+}
+
+.app-container.is-sidebar-hidden .app-sidebar {
+  display: none;
+}
+
+.sidebar-hidden .app-sidebar {
+  display: none;
 }
 
 h1,
@@ -27,13 +35,13 @@ h6 {
 }
 
 h1 {
-  --app-font-size: 1.8rem;
+  --app-font-size: 1.5rem;
   --app-line-height: 1.125;
   --app-typography-spacing-top: 3rem;
 }
 
 h2 {
-  --app-font-size: 1.6rem;
+  --app-font-size: 1.4rem;
   --app-line-height: 1.15;
   --app-typography-spacing-top: 2.625rem;
 }
@@ -179,7 +187,7 @@ table td .grid-actions [role="button"] {
   color: var(--app-muted-color);
   border: 1px solid var(--app-border);
   font-size: small;
-  background: var(--app-form-element-active-background-color);
+  background: var(--app-form-element-background-color);
   box-shadow: var(--app-group-box-shadow);
 }
 
@@ -364,12 +372,51 @@ section {
     padding-right: 0;
     padding-left: 0;
   }
+
+  h1 {
+    --app-font-size: 1.7rem;
+
+  }
+
+  h2 {
+    --app-font-size: 1.6rem;
+
+  }
+
+  h3 {
+    --app-font-size: 1.3rem;
+
+  }
+
+  h4 {
+    --app-font-size: 1.2rem;
+
+  }
+
+  h5 {
+    --app-font-size: 1.1rem;
+
+  }
+
+  h6 {
+    --app-font-size: 1rem;
+
+  }
 }
 
 @media (min-width: 768px) {
   .container {
     max-width: 700px;
   }
+  .app-container.is-sidebar-hidden:has(.aside-icon-bar):has(.app-sidebar) {
+    display: grid;
+    min-height: 100dvh;
+    align-items: flex-start;
+    grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+  }
+  .sidebar-hidden .app-container:has(.aside-icon-bar):has(.app-sidebar) {
+    grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+  }
   .app-container:has(.aside-icon-bar):has(.app-sidebar) {
     display: grid;
     min-height: 100dvh;
@@ -380,15 +427,15 @@ section {
     display: grid;
     min-height: 100dvh;
     align-items: flex-start;
-    grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
   }
 
   .app-container.is-sidebar-collapsed {
-    grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
   }
 
   .sidebar-collapsed .app-container {
-    grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
   }
 
   .app-main {
@@ -404,6 +451,8 @@ section {
   .app-main-content:has(.app-details-container) {
     margin-bottom: 0;
     padding: 0;
+    position: relative;
+    z-index: 1;
   }
 }
 
@@ -634,7 +683,6 @@ mark {
   vertical-align: baseline;
 }
 
-
 abbr[title] {
   border-bottom: 1px dotted;
   text-decoration: none;
@@ -665,7 +713,7 @@ del {
   --app-underline: var(--app-primary-underline);
   outline: 0;
   background-color: var(--app-background-color);
-  color: var(--app-color);
+  color: cornflowerblue;
   -webkit-text-decoration: var(--app-text-decoration);
   text-decoration: var(--app-text-decoration);
   text-decoration-color: var(--app-underline);
@@ -2323,6 +2371,8 @@ details.dropdown > summary + ul li {
   padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
     var(--app-form-element-spacing-horizontal);
   list-style: none;
+  text-align: left;
+  border-bottom: 1px solid var(--app-accordion-border-color);
 }
 
 details.dropdown > summary + ul li:first-of-type {
@@ -2331,6 +2381,7 @@ details.dropdown > summary + ul li:first-of-type {
 
 details.dropdown > summary + ul li:last-of-type {
   margin-bottom: calc(var(--app-form-element-spacing-vertical) * 0.5);
+  border-bottom: 0;
 }
 
 details.dropdown > summary + ul li a {