updating modes and structures

assets/styles/media.css

@@ -1,6 +1,5 @@
 /* =========================================================
    MEDIA.CSS — responsive overrides for the sidebar+tab layout
-   This file replaces the old float-based media queries.
    Load it AFTER style.css.
    ========================================================= */
 
@@ -21,13 +20,11 @@
    CUSTOM SCROLLBARS — themed throughout
    ========================================================= */
 
-/* Firefox */
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--border-mid) transparent;
 }
 
-/* Webkit (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -47,7 +44,7 @@
 }
 
 /* =========================================================
-   1200px — content column is narrow enough to collapse sidenotes
+   1200px — narrow enough to collapse sidenotes
    ========================================================= */
 
 @media (max-width: 1200px) {
@@ -87,7 +84,7 @@
 }
 
 /* =========================================================
-   900px — auto-hide sidebar (collapses to 0 width)
+   900px — auto-hide sidebar
    ========================================================= */
 
 @media (max-width: 900px) {
@@ -108,7 +105,6 @@
 
 @media (max-width: 768px) {
 
-  /* Allow body to scroll normally */
   html, body {
     overflow: auto;
     height: auto;
@@ -194,7 +190,6 @@
     box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
   }
 
-  /* Dimmed backdrop — clicking it closes the sidebar */
   #sidebar-backdrop {
     display: none;
     position: fixed;
@@ -283,9 +278,47 @@
   }
 
   /* ---- Code blocks ---- */
-  pre.src,
-  .org-src-container > pre {
-    font-size: 0.78rem;
+  /* Shrink font, keep horizontal scroll — never wrap or overflow page */
+  .org-src-container {
+    /* Ensure it never escapes the viewport */
+    max-width: calc(100vw - 2rem);
+  }
+
+  .org-src-container > pre,
+  pre.src {
+    font-size: 0.74rem;
+    padding: 1.4rem 0.7rem 0.75rem;
+    /* Enforce horizontal scroll; absolutely no page-overflow */
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: pre;
+  }
+
+  /* ---- Tables ---- */
+  /* Wrapper-based scroll */
+  .table-wrapper {
+    margin: 0.75rem 0;
+    border-radius: 5px;
+    /* Constrain to viewport */
+    max-width: calc(100vw - 2rem);
+  }
+
+  /* Bare tables (no wrapper) also scroll on mobile */
+  #content table {
+    font-size: 0.8rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  #content table th,
+  .table-wrapper table th {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.62rem;
+  }
+
+  #content table td,
+  .table-wrapper table td {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.8rem;
   }
 
   /* ---- Tabs ---- */
@@ -314,4 +347,19 @@
     min-width: 60px;
     font-size: 0.65rem;
   }
+
+  .org-src-container {
+    max-width: calc(100vw - 1.5rem);
+  }
+
+  .org-src-container > pre,
+  pre.src {
+    font-size: 0.7rem;
+    padding: 1.3rem 0.6rem 0.6rem;
+  }
+
+  #content table,
+  .table-wrapper {
+    max-width: calc(100vw - 1.5rem);
+  }
 }

assets/styles/style.css

@@ -16,7 +16,7 @@
   --content-max: 680px;
   --content-pad: 2.5rem;
 
-  /* Dark palette — warm aged manuscript */
+  /* Dark palette  warm aged manuscript */
   --bg:        #18160f;
   --page-bg:   #111009;
   --pane-bg:   #1c1a12;
@@ -265,7 +265,7 @@ body { display: flex; flex-direction: column; }
   overflow: hidden;
   transition: width var(--dur-mid) var(--ease-out);
   z-index: 100;
-  position: relative; /* needed for panel absolute positioning on mobile */
+  position: relative;
 }
 
 #sidebar.expanded {
@@ -293,7 +293,6 @@ body { display: flex; flex-direction: column; }
 .rail-btn:hover { color: var(--fg); background: var(--accent-sub); }
 .rail-btn.active { color: var(--accent); background: var(--accent-glow); }
 
-/* Tooltip for rail buttons */
 .rail-btn[title]:not(:disabled):hover::after {
   content: attr(title);
   position: absolute;
@@ -312,7 +311,6 @@ body { display: flex; flex-direction: column; }
   z-index: 500;
 }
 
-/* Expanded sidebar panel */
 .sidebar-panel { display: none; width: 100%; flex-direction: column; }
 #sidebar.expanded .sidebar-panel { display: flex; }
 
@@ -497,7 +495,6 @@ body { display: flex; flex-direction: column; }
   position: relative;
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
-  /* Subtle ruled lines */
   background-image: repeating-linear-gradient(
     180deg,
     transparent, transparent 27px,
@@ -509,7 +506,6 @@ body { display: flex; flex-direction: column; }
 #content-area::-webkit-scrollbar { width: 5px; }
 #content-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
-/* Left margin rule */
 #content-area::before {
   content: '';
   position: absolute;
@@ -519,7 +515,6 @@ body { display: flex; flex-direction: column; }
   z-index: 0;
 }
 
-/* Tab panes */
 .tab-content { display: none; min-height: 100%; position: relative; z-index: 1; }
 .tab-content.active { display: block; }
 
@@ -528,7 +523,6 @@ body { display: flex; flex-direction: column; }
    ========================================================= */
 
 #content, .tab-content-inner {
-  max-width: var(--content-max);
   margin: 0 auto;
   padding: var(--r6) var(--content-pad) calc(var(--r8) * 2.5);
 }
@@ -621,16 +615,15 @@ a:hover {
   background: var(--accent-glow);
 }
 
-/* Wikilink brackets — scoped to note content only, not panels/sidebar */
 #content a[href$=".html"]::before {
-  content: '\5B\5B'; /* [[ */
+  content: '\5B\5B';
   font-family: var(--font-mono);
   font-size: 0.72em;
   opacity: 0.4;
   letter-spacing: -0.05em;
 }
 #content a[href$=".html"]::after {
-  content: '\5D\5D'; /* ]] */
+  content: '\5D\5D';
   font-family: var(--font-mono);
   font-size: 0.72em;
   opacity: 0.4;
@@ -937,60 +930,223 @@ blockquote p { margin: 0; }
 .epigraph blockquote cite { font-style: italic; color: var(--accent); }
 
 /* =========================================================
-   CODE
+   CODE — inline
    ========================================================= */
 
 :not(pre) > code {
   padding: 0.15em 0.45em;
-  font-family: var(--font-mono); font-size: 0.8em;
-  background: var(--code-bg); color: var(--heading-2);
-  border: 1px solid var(--border-2); border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.82em;
+  background: var(--code-bg);
+  color: var(--heading-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
 }
-pre { background: var(--code-bg); }
+
+/* =========================================================
+   CODE BLOCKS — fixed: no overflow, readable label, mobile-safe
+   ========================================================= */
 
 .org-src-container {
-  border: 1px solid var(--border); border-radius: 7px;
-  font-family: var(--font-mono); font-size: 0.82rem;
-  margin: var(--r5) auto; overflow: hidden; position: relative;
-}
-.org-src-container > pre { overflow: auto; margin: 0; padding: var(--r5) var(--r4); }
-.org-src-container > pre:before {
-  display: block; position: sticky; top: 0;
-  background: color-mix(in oklab, var(--code-bg) 80%, var(--border) 20%);
-  color: var(--fg-faint); padding: 0.35rem var(--r4);
-  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
-  border-bottom: 1px solid var(--border);
-}
-.org-src-container > pre.src-bash:before        { content: "bash"; }
-.org-src-container > pre.src-sh:before          { content: "sh"; }
-.org-src-container > pre.src-python:before      { content: "python"; }
-.org-src-container > pre.src-emacs-lisp:before  { content: "emacs lisp"; }
-.org-src-container > pre.src-js:before,
-.org-src-container > pre.src-javascript:before  { content: "javascript"; }
-.org-src-container > pre.src-typescript:before  { content: "typescript"; }
-.org-src-container > pre.src-html:before        { content: "html"; }
-.org-src-container > pre.src-css:before         { content: "css"; }
-.org-src-container > pre.src-rust:before        { content: "rust"; }
-.org-src-container > pre.src-R:before           { content: "R"; }
-
-pre.src {
-  padding: var(--r5) var(--r4) var(--r4);
-  font-family: var(--font-mono); font-size: 0.875rem;
-  line-height: 1.55; overflow-x: auto; white-space: pre-wrap;
+  position: relative;
+  margin: var(--r5) 0;
+  border: 1px solid var(--border-2);
+  border-radius: 7px;
   background: var(--code-bg);
+  overflow: hidden;
+  /* Prevent the block itself from stretching the page */
+  max-width: 100%;
+  min-width: 0;
 }
 
+/* The language label row */
+.org-src-container > pre::before {
+  /* We move the label out of the flow entirely — it sits
+     as a tiny dim watermark in the top-right corner      */
+  content: attr(data-lang);
+  position: absolute;
+  top: 0.45rem;
+  right: 0.6rem;
+  font-size: 0.62rem;
+  font-family: var(--font-mono);
+  letter-spacing: 0.08em;
+  color: var(--fg-ghost);
+  pointer-events: none;
+  z-index: 2;
+  line-height: 1;
+  /* Override the old full-width bar styles */
+  display: block;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-transform: lowercase;
+}
+
+/* Per-language label text via data-lang on the <pre>.
+   Emacs Org sets class="src src-python" etc, so we also
+   handle the legacy class-based labels as a fallback.    */
+.org-src-container > pre.src-bash::before        { content: "bash"; }
+.org-src-container > pre.src-sh::before          { content: "sh"; }
+.org-src-container > pre.src-python::before      { content: "python"; }
+.org-src-container > pre.src-emacs-lisp::before  { content: "elisp"; }
+.org-src-container > pre.src-js::before,
+.org-src-container > pre.src-javascript::before  { content: "js"; }
+.org-src-container > pre.src-typescript::before  { content: "ts"; }
+.org-src-container > pre.src-html::before        { content: "html"; }
+.org-src-container > pre.src-css::before         { content: "css"; }
+.org-src-container > pre.src-rust::before        { content: "rust"; }
+.org-src-container > pre.src-R::before           { content: "R"; }
+
+/* The <pre> itself — scrolls horizontally, never wraps */
+.org-src-container > pre {
+  margin: 0;
+  padding: 0.9rem 0.85rem;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  line-height: 1.6;
+  color: var(--fg);
+  background: transparent;
+  /* Horizontal scroll instead of page-breaking overflow */
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  /* Never wrap — let it scroll */
+  white-space: pre;
+  /* Constrain to parent so it can't break layout */
+  max-width: 100%;
+  min-width: 0;
+  /* Make room for the language watermark in top-right */
+  padding-top: 1.6rem;
+}
+
+/* Standalone pre.src (not wrapped in .org-src-container) */
+pre.src {
+  position: relative;
+  margin: var(--r5) 0;
+  padding: 0.9rem 0.85rem;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  line-height: 1.6;
+  color: var(--fg);
+  background: var(--code-bg);
+  border: 1px solid var(--border-2);
+  border-radius: 7px;
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  white-space: pre;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Copy button */
 .copy-btn {
-  position: absolute; top: 0.5rem; right: 0.5rem;
-  background: var(--surface); color: var(--fg-faint);
-  border: 1px solid var(--border-2); border-radius: 4px;
-  padding: 0.2em 0.6em; font-size: 0.68rem;
-  font-family: var(--font-mono); letter-spacing: 0.04em;
-  cursor: pointer; z-index: 10;
+  position: absolute;
+  top: 0.45rem;
+  right: 0.5rem;
+  background: var(--surface);
+  color: var(--fg-faint);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  padding: 0.2em 0.55em;
+  font-size: 0.65rem;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  z-index: 10;
   transition: all var(--dur-fast);
+  line-height: 1.4;
 }
 .copy-btn:hover {
-  color: var(--fg); border-color: var(--accent-dim);
+  color: var(--fg);
+  border-color: var(--accent-dim);
+  background: var(--accent-glow);
+}
+
+/* =========================================================
+   TABLES — mobile-safe with horizontal scroll
+   ========================================================= */
+
+/* Wrap every table in a .table-wrapper div (or do it in JS).
+   If you can't add wrapper divs, the table rules below still
+   improve things; just overflow-x won't be contained.       */
+.table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  margin: var(--r5) 0;
+  max-width: 100%;
+}
+
+/* When Org-mode emits a bare <table> with no wrapper,
+   contain it the same way at the table level itself.    */
+#content table {
+  border-collapse: collapse;
+  width: 100%;
+  /* Allow horizontal scroll; never let columns shrink to nothing */
+  min-width: 0;
+  font-size: 0.85rem;
+  font-family: var(--font-body);
+  display: block;          /* block so overflow-x works on the element */
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  /* Restore normal table layout inside the block box */
+  /* (display:block on <table> makes it scroll without a wrapper) */
+}
+
+/* But if it IS inside a .table-wrapper, use normal table display */
+.table-wrapper table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#content table thead,
+.table-wrapper table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+#content table th,
+.table-wrapper table th {
+  text-align: left;
+  padding: 0.55rem 0.85rem;
+  font-size: 0.68rem;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-faint);
+  background: color-mix(in oklab, var(--surface) 80%, transparent);
+  border-bottom: 1px solid var(--border-2);
+  white-space: nowrap;
+}
+
+#content table td,
+.table-wrapper table td {
+  padding: 0.5rem 0.85rem;
+  color: var(--fg-dim);
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+  /* Allow long words to break so cells don't balloon */
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+#content table tr:last-child td,
+.table-wrapper table tr:last-child td {
+  border-bottom: none;
+}
+
+#content table tbody tr,
+.table-wrapper table tbody tr {
+  transition: background var(--dur-fast);
+}
+
+#content table tbody tr:hover,
+.table-wrapper table tbody tr:hover {
   background: var(--accent-glow);
 }
 
@@ -1008,12 +1164,11 @@ pre.src {
 #text-table-of-contents a.is-active,
 #text-table-of-contents a[aria-current] { color: var(--accent); }
 
-/* Prevent wikilink brackets on TOC links */
 #text-table-of-contents a::before,
 #text-table-of-contents a::after { content: none !important; }
 
 /* =========================================================
-   BACKLINKS SECTION (inline at bottom of note)
+   BACKLINKS SECTION
    ========================================================= */
 
 .backlinks-section {
@@ -1041,7 +1196,6 @@ pre.src {
   transition: color var(--dur-fast), border-color var(--dur-fast);
 }
 .backlinks-list li a:hover { color: var(--link-hover); border-bottom-color: var(--fg-faint); }
-/* No wikilink brackets in backlinks section */
 .backlinks-list li a::before,
 .backlinks-list li a::after { content: none !important; }
 
@@ -1129,6 +1283,31 @@ pre.src {
   #breadcrumb-trail { display: none; }
 
   #note-toolbar { flex-wrap: wrap; height: auto; }
+
+  /* Code blocks on mobile */
+  .org-src-container > pre,
+  pre.src {
+    font-size: 0.75rem;
+    padding: 1.4rem 0.7rem 0.7rem;
+  }
+
+  /* Tables on mobile — already scroll via display:block,
+     but tighten cell padding */
+  #content table th,
+  .table-wrapper table th {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.65rem;
+  }
+  #content table td,
+  .table-wrapper table td {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.8rem;
+  }
+
+  .table-wrapper {
+    margin: var(--r4) 0;
+    border-radius: 5px;
+  }
 }
 
 /* =========================================================
@@ -1139,7 +1318,6 @@ pre.src {
 .recipe-meta td:first-child { font-weight: 600; white-space: nowrap; }
 .recipe-meta { font-size: 0.9em; opacity: 0.85; }
 
-/* Smooth fade in for note content */
 @keyframes note-in {
   from { opacity: 0; transform: translateY(4px); }
   to   { opacity: 1; transform: translateY(0); }
@@ -1148,7 +1326,6 @@ pre.src {
   animation: note-in 200ms var(--ease-out) forwards;
 }
 
-/* Reading progress bar */
 #reading-progress {
   position: fixed;
   top: var(--header-h);
@@ -1161,7 +1338,6 @@ pre.src {
   pointer-events: none;
 }
 
-/* Loading state */
 .note-loading {
   display: flex;
   align-items: center;