don't use <hr> for horizontal lines between elements + better looking shadows

src/App/AST.css

@@ -83,15 +83,17 @@ button.inputEvent:active:not(:disabled) {
   display: inline-block;
 }
 
-hr {
+/* hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 0;
-  margin-bottom: -1px;
+  margin-top: -1px;
+  margin-bottom: -5px;
   padding: 0;
-}
+  z-index: -1;
+} */
 
 ul {
   list-style-type: circle;
@@ -101,7 +103,7 @@ ul {
   /* list-style-position: ; */
 }
 
-.onTop {
-  box-shadow: 0 -10px 20px 10px rgba(0, 0, 0, 0.75);
+.shadowBelow {
+  box-shadow: 0 -15px 15px 15px rgba(0, 0, 0, 0.4);
   z-index: 1;
 }

src/App/App.css

@@ -5,12 +5,23 @@ summary {
   margin-left: -20;
 } */
 
+details:has(+ details) {
+  border-bottom: 1px lightgrey solid;
+}
+
 .runtimeState {
-  padding-left: 4px;
+  padding: 4px;
+  /* padding-left: 4px;
   padding-right: 4px;
   padding-top: 2px;
-  padding-bottom: 2px;
-  margin-top: 2px;
+  padding-bottom: 2px; */
+}
+
+.runtimeState:has(+.runtimeState) {
+  border-bottom: 1px lightgrey solid;
+}
+.runtimeState:has(+.runtimeState.active) {
+  border-bottom: 0;
 }
 
 .runtimeState:hover {
@@ -22,7 +33,7 @@ summary {
   /* background-color: rgba(255, 140, 0, 0.2); */
   background-color: rgba(0,0,255,0.2);
   /* border: solid black 3px; */
-  border: solid blue 2px;
+  border: solid blue 1px;
 }
 /* details:not(:has(details)) > summary::marker {
   color: white;

src/App/App.tsx

@@ -212,13 +212,16 @@ export function App() {
       <Box sx={{flexGrow:1, overflow: "auto"}}>
         <Stack sx={{height:'100%'}}>
           {/* Top bar */}
-          <Box sx={{
+          <Box
+            className="shadowBelow"
+            sx={{
               display: "flex",
               borderBottom: 1,
               borderColor: "divider",
               alignItems: 'center',
               flex: '0 0 content',
-          }}>
+            }}
+          >
             <TopPanel
               rt={rtIdx === undefined ? undefined : rt[rtIdx]}
               {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal}}
@@ -241,19 +244,20 @@ export function App() {
         maxWidth: 'min(300px, 30vw)',
       }}>
         <Stack sx={{height:'100%'}}>
-          <Box className="onTop" sx={{flex: '0 0 content', backgroundColor: ''}}>
+          <Box
+            className="shadowBelow"
+            sx={{flex: '0 0 content', backgroundColor: ''}}
+          >
             <PersistentDetails localStorageKey="showStateTree" initiallyOpen={true}>
               <summary>state tree</summary>
               <ul>
                 <ShowAST {...{...ast, rt: rt.at(rtIdx!), highlightActive}}/>
               </ul>
             </PersistentDetails>
-            <hr/>
             <PersistentDetails localStorageKey="showInputEvents" initiallyOpen={true}>
               <summary>input events</summary>
               <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined}/>
             </PersistentDetails>
-            <hr/>
             <PersistentDetails localStorageKey="showOutputEvents" initiallyOpen={true}>
               <summary>output events</summary>
               <ShowOutputEvents outputEvents={ast.outputEvents}/>

src/App/RTHistory.tsx

@@ -21,8 +21,9 @@ export function RTHistory({rt, rtIdx, ast, setRTIdx, setTime, refRightSideBar}:
 
   return <div>
     {rt.map((r, idx) => <>
-    <hr/>
-    <div className={"runtimeState"+(idx===rtIdx?" active":"")} onClick={() => gotoRt(idx, r.simtime)}>
+    <div
+      className={"runtimeState"+(idx===rtIdx?" active":"")}
+      onClick={() => gotoRt(idx, r.simtime)}>
       <div>
         {formatTime(r.simtime)}
         &emsp;
@@ -33,6 +34,7 @@ export function RTHistory({rt, rtIdx, ast, setRTIdx, setTime, refRightSideBar}:
       {r.outputEvents.length>0 && <>^
         {r.outputEvents.map((e:RaisedEvent) => <span className="outputEvent">{e.name}</span>)}
       </>}
+    {/* <hr/> */}
     </div></>)}
   </div>;
 }