Secred in separate file, desing improvements

styles.css

@@ -129,7 +129,6 @@ h3 {
 
 .header-actions,
 .form-actions,
-.route-actions,
 .section-heading {
   display: flex;
   align-items: center;
@@ -137,7 +136,6 @@ h3 {
 }
 
 .header-actions,
-.route-actions,
 .form-actions {
   flex-wrap: wrap;
   justify-content: flex-end;
@@ -175,8 +173,7 @@ textarea {
   resize: vertical;
 }
 
-button,
-.open-link {
+button {
   border: 0;
   border-radius: 999px;
   padding: 0.7rem 0.95rem;
@@ -185,12 +182,10 @@ button,
   font: inherit;
   font-weight: 800;
   line-height: 1;
-  text-decoration: none;
   cursor: pointer;
 }
 
-button:hover,
-.open-link:hover {
+button:hover {
   background: var(--primary-dark);
 }
 
@@ -246,6 +241,17 @@ textarea:focus {
   font-weight: 700;
 }
 
+.route-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.route-top h3 {
+  flex: 1;
+}
+
 .route-title {
   color: var(--text);
   text-decoration: none;
@@ -257,10 +263,74 @@ textarea:focus {
 }
 
 .route-description {
-  margin-bottom: 0.85rem;
+  margin-bottom: 0;
   white-space: pre-wrap;
 }
 
+.route-menu {
+  position: relative;
+  flex: none;
+}
+
+.route-menu summary {
+  display: grid;
+  width: 2.2rem;
+  height: 2.2rem;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 1.4rem;
+  line-height: 1;
+  list-style: none;
+}
+
+.route-menu summary::-webkit-details-marker {
+  display: none;
+}
+
+.route-menu summary:hover,
+.route-menu[open] summary {
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  color: var(--primary);
+}
+
+.menu-items {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  z-index: 3;
+  min-width: 9rem;
+  padding: 0.35rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.8rem;
+  box-shadow: var(--shadow);
+}
+
+.menu-items button {
+  display: block;
+  width: 100%;
+  border-radius: 0.55rem;
+  padding: 0.75rem;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+}
+
+.menu-items button:hover {
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.menu-items .danger {
+  color: var(--danger);
+}
+
+.menu-items .danger:hover {
+  color: #fff;
+  background: var(--danger-dark);
+}
+
 .empty-state {
   padding: 1.5rem 1rem;
   text-align: center;
@@ -283,15 +353,6 @@ textarea:focus {
     padding-inline: 0.8rem;
   }
 
-  .route-actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    justify-content: stretch;
-  }
-
-  .route-actions > * {
-    text-align: center;
-  }
 }
 
 @media (min-width: 700px) {