Inital attempt

assets/style.css

@@ -348,6 +348,12 @@ main > h2 {
     z-index: 50;
 }
 
+/* Standalone FAB buttons (page TOC) are mobile-only.
+   Wrapped FABs (search actions dropdown) stay visible on desktop. */
+button.fab {
+    display: none;
+}
+
 .btn-fab {
     background: var(--bg-panel);
     border: 1px solid var(--secondary);
@@ -540,6 +546,43 @@ hr {
     background: var(--primary-hover);
 }
 
+/* === Right rail === */
+.right-rail {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    width: 14rem;
+    max-height: calc(100vh - 2rem);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    z-index: 10;
+}
+
+/* Panels share visual treatment when inside the rail */
+.actions,
+.right-rail .toc,
+.right-rail .diary-cal {
+    position: static;
+    top: auto;
+    left: auto;
+    right: auto;
+    width: auto;
+    max-height: none;
+    border: 1px solid var(--secondary);
+    background: var(--bg);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.15rem;
+}
+
 /* === Table of contents === */
 .toc {
     position: fixed;
@@ -832,6 +875,16 @@ hr {
 
 /* === Responsive === */
 @media (max-width: 1100px) {
+    .right-rail {
+        position: static;
+        width: auto;
+        max-height: none;
+        overflow: visible;
+        display: contents;
+    }
+    button.fab {
+        display: inline-flex;
+    }
     .panel-toggle {
         display: block;
         background: none;
@@ -854,7 +907,7 @@ hr {
     .panel-toggle[aria-expanded="true"]::before {
         content: "▾ ";
     }
-    .toc,
+    .actions,
     .diary-cal {
         position: static;
         display: none;
@@ -863,10 +916,29 @@ hr {
         margin: 0 auto 1rem;
         max-height: none;
     }
-    .toc.is-open,
+    .actions.is-open {
+        display: flex;
+    }
     .diary-cal.is-open {
         display: block;
     }
+    /* TOC on mobile is a floating overlay toggled by the FAB. */
+    .toc {
+        position: fixed;
+        bottom: 5rem;
+        right: 1rem;
+        top: auto;
+        left: auto;
+        width: calc(100% - 2rem);
+        max-width: 20rem;
+        max-height: calc(100vh - 8rem);
+        overflow-y: auto;
+        display: none;
+        z-index: 60;
+    }
+    .toc.is-open {
+        display: block;
+    }
 }
 
 @media (max-width: 600px) {