Merge TOC into page content

assets/style.css

@@ -597,12 +597,7 @@ button.fab { display: none; }
 ::-webkit-scrollbar-thumb { background: var(--primary); }
 ::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
 
-/* === Sidebar (right rail) ===
-   Full-height column in the app-shell that scrolls its own overflow (TOC on
-   top, page widget(s) below). Collapses out of the flex row when it has no
-   content so the center column widens. A dashed separator to main mirrors the
-   left tree rail; widgets within drop their panel outlines (see
-   .panel-sidebar). */
+/* === Optional Sidebar (right side) === */
 .sidebar {
     width: 14rem;
     flex-shrink: 0;
@@ -614,21 +609,23 @@ button.fab { display: none; }
     border-left: var(--border-dashed);
 }
 aside.sidebar:empty { display: none; }
-
-/* Density modifier for panels in the sidebar (smaller font, tighter padding).
-   Drops the .panel outline so the rail reads as a clean column separated from
-   main by the .sidebar dashed border, matching the left tree rail. Inside the
-   mobile Overlay the widgets render as plain full-width content. */
 .panel-sidebar {
     padding: var(--space-2) var(--space-3);
     font-size: var(--font-sm);
     border: none;
 }
 
-/* === Table of contents ===
-   Rendered as a .panel-sidebar block in the right rail (padding + font-size
-   come from that density class); toc.js always mounts it there, on both
-   desktop and inside the mobile Overlay. */
+/* === Table of contents ===*/
+.toc {
+    float: right;
+    width: 15rem;
+    max-width: 45%;
+    margin: 0 0 var(--space-3) var(--space-4);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-sm);
+    max-width: 60vh;
+    overflow-y: auto;
+}
 .toc ul { list-style: none; margin: 0; padding: 0; }
 .toc li { margin: 0.15rem 0; }
 .toc a {
@@ -889,10 +886,6 @@ aside.sidebar:empty { display: none; }
     main { padding: var(--space-4) var(--space-3); }
     .app-name {display: none;}
     .editor-cm { min-height: 50vh; }
-    /* Editing on mobile is full-bleed: drop the main inset so the toolbar and
-       editor use the entire viewport width. */
-    body.edit-mode main { padding: 0; }
-    /* Fingers, not cursors: give every toolbar control a ~44px tap target. */
     .editor-toolbar { gap: var(--space-2); padding: var(--space-2); }
     .editor-toolbar .btn-tool {
         display: inline-flex;
@@ -902,17 +895,10 @@ aside.sidebar:empty { display: none; }
         min-height: 2rem;
         padding: 0 var(--space-1);
     }
-    /* Pin the toolbar above the on-screen keyboard rather than at the top, which
-       is out of thumb reach while typing. interactive-widget=resizes-content
-       (layout.html viewport) shrinks the viewport on keyboard open so bottom: 0
-       sits directly above it. cm-content reserves matching scroll space so the
-       last lines aren't hidden behind the bar. */
     body.edit-mode .editor-toolbar {
         position: fixed;
         left: 0;
         right: 0;
-        /* Reset the desktop sticky `top: 0`; with it, fixed + top + bottom would
-           stretch the bar to the full viewport height. */
         top: auto;
         bottom: 0;
         z-index: 50;
@@ -923,6 +909,7 @@ aside.sidebar:empty { display: none; }
     body.edit-mode .cm-content {
         padding-bottom: calc(5rem + env(safe-area-inset-bottom));
     }
+    body.edit-mode main { padding: 0; }
     .modal-backdrop { padding: var(--space-2); align-items: flex-start; }
     .modal { max-width: none; margin-top: var(--space-4); }
     .modal .panel-header { cursor: default; }
@@ -938,4 +925,5 @@ aside.sidebar:empty { display: none; }
     .list-item td.icon { grid-row: 1; grid-column: 1; }
     .list-item td.name { grid-row: 1; grid-column: 2; }
     .list-item td.meta { grid-row: 2; grid-column: 2; text-align: left; }
+    .toc {float: none; width: auto; max-width: none; margin: 0 0 var(--space-4);}
 }