v03.09.16: brand-aside columns, offline page redesign, variable click-to-copy

- Brand-aside position now uses flex columns like top-a (card style, equal-width)
- Offline page: external offline.css with theme variables, 3-column centered card
  layout, Osaka font loading, full-screen on mobile
- CSS variable click-to-copy: scans text for --var patterns, wraps in clickable
  chips with toast notification on copy
- Search button border matches input border (--input-border-color)
- mod_stats override: converted from dl to table layout
- Patch bump 03.09.15 → 03.09.16

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/media/js/template.js

@@ -641,6 +641,154 @@
 		});
 	}
 
+	// ========================================================================
+	// CSS VARIABLE CLICK-TO-COPY
+	// ========================================================================
+
+	/**
+	 * Inject toast + variable-chip styles once.
+	 */
+	function injectVarCopyStyles() {
+		if (doc.getElementById("moko-var-copy-styles")) return;
+		var style = doc.createElement("style");
+		style.id = "moko-var-copy-styles";
+		style.textContent =
+			".moko-var-chip{cursor:pointer;font-family:var(--font-monospace,monospace);font-size:.875em;" +
+			"background:var(--secondary-bg,#151b22);color:var(--link-color,#8ab4f8);" +
+			"border:1px solid var(--border-color,#2b323b);border-radius:.25rem;padding:.1em .4em;" +
+			"transition:background .15s,border-color .15s;white-space:nowrap;display:inline}" +
+			".moko-var-chip:hover{background:var(--color-primary,#112855);color:#fff;border-color:var(--color-primary,#112855)}" +
+			".moko-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:10000;" +
+			"background:var(--color-primary,#112855);color:#fff;padding:.6rem 1.25rem;" +
+			"border-radius:.375rem;font-size:.875rem;box-shadow:0 4px 12px rgba(0,0,0,.25);" +
+			"opacity:0;transition:opacity .2s;pointer-events:none}" +
+			".moko-toast--show{opacity:1}";
+		doc.head.appendChild(style);
+	}
+
+	/**
+	 * Show a brief "Copied to clipboard" toast.
+	 * @param {string} text - The variable name that was copied
+	 */
+	function showCopyToast(text) {
+		var existing = doc.querySelector(".moko-toast");
+		if (existing) existing.remove();
+
+		var toast = doc.createElement("div");
+		toast.className = "moko-toast";
+		toast.textContent = "Copied to clipboard: " + text;
+		doc.body.appendChild(toast);
+
+		// Trigger reflow then show
+		void toast.offsetWidth;
+		toast.classList.add("moko-toast--show");
+
+		setTimeout(function () {
+			toast.classList.remove("moko-toast--show");
+			setTimeout(function () { toast.remove(); }, 200);
+		}, 2000);
+	}
+
+	/**
+	 * Copy text to clipboard and show toast.
+	 * @param {string} text
+	 */
+	function copyVariable(text) {
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			navigator.clipboard.writeText(text).then(function () {
+				showCopyToast(text);
+			});
+		} else {
+			// Fallback for older browsers using deprecated API
+			var ta = doc.createElement("textarea");
+			ta.value = text;
+			ta.style.cssText = "position:fixed;left:-9999px";
+			doc.body.appendChild(ta);
+			ta.select();
+			try { doc.execCommand("copy"); } catch (e) { /* noop */ }
+			ta.remove();
+			showCopyToast(text);
+		}
+	}
+
+	/**
+	 * Scan text nodes for CSS variable patterns (--variable-name) and wrap
+	 * each match in a clickable chip that copies the variable to clipboard.
+	 */
+	function initVarCopy() {
+		injectVarCopyStyles();
+
+		// Pattern: --[a-zA-Z] followed by word/hyphen chars
+		var varPattern = /--[a-zA-Z][\w-]*/g;
+
+		// Elements to skip (inputs, scripts, styles, already-processed, code editors)
+		var SKIP_TAGS = { SCRIPT: 1, STYLE: 1, TEXTAREA: 1, INPUT: 1, SELECT: 1, NOSCRIPT: 1 };
+
+		var walker = doc.createTreeWalker(
+			doc.body,
+			NodeFilter.SHOW_TEXT,
+			{
+				acceptNode: function (node) {
+					if (SKIP_TAGS[node.parentNode.tagName]) return NodeFilter.FILTER_REJECT;
+					if (node.parentNode.classList && node.parentNode.classList.contains("moko-var-chip")) return NodeFilter.FILTER_REJECT;
+					if (!varPattern.test(node.nodeValue)) return NodeFilter.FILTER_REJECT;
+					varPattern.lastIndex = 0;
+					return NodeFilter.FILTER_ACCEPT;
+				}
+			}
+		);
+
+		var textNodes = [];
+		while (walker.nextNode()) textNodes.push(walker.currentNode);
+
+		textNodes.forEach(function (node) {
+			var text = node.nodeValue;
+			var frag = doc.createDocumentFragment();
+			var lastIndex = 0;
+			var match;
+
+			varPattern.lastIndex = 0;
+			while ((match = varPattern.exec(text)) !== null) {
+				// Text before the match
+				if (match.index > lastIndex) {
+					frag.appendChild(doc.createTextNode(text.slice(lastIndex, match.index)));
+				}
+
+				// Clickable chip
+				var chip = doc.createElement("span");
+				chip.className = "moko-var-chip";
+				chip.textContent = match[0];
+				chip.setAttribute("role", "button");
+				chip.setAttribute("tabindex", "0");
+				chip.setAttribute("title", "Click to copy " + match[0]);
+				chip.addEventListener("click", (function (varName) {
+					return function (e) {
+						e.preventDefault();
+						copyVariable(varName);
+					};
+				})(match[0]));
+				chip.addEventListener("keydown", (function (varName) {
+					return function (e) {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							copyVariable(varName);
+						}
+					};
+				})(match[0]));
+				frag.appendChild(chip);
+
+				lastIndex = match.index + match[0].length;
+			}
+
+			// Remaining text after last match
+			if (lastIndex < text.length) {
+				frag.appendChild(doc.createTextNode(text.slice(lastIndex)));
+			}
+
+			node.parentNode.replaceChild(frag, node);
+		});
+	}
+
 	/**
 	 * Run all template JS initializations
 	 */
@@ -667,6 +815,7 @@
 		initBackTop();
 		initSearchToggle();
 		initSidebarAccordion();
+		initVarCopy();
 	}
 
 	if (doc.readyState === "loading") {