Merge branch 'view-ui'

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/style.css

@@ -23,6 +23,8 @@
   --hunk: #e8eefb;
   --shadow: 0 1px 2px rgba(20, 30, 50, 0.08);
   --radius: 6px;
+  --vc-green: #3d8160; --vc-teal: #2f7c80; --vc-purple: #7a5ba8; --vc-pink: #a8557f;
+  --vc-orange: #a8652f; --vc-yellow: #8a7424; --vc-red: #b0534c; --vc-grey: #6b7280;
   --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
   color-scheme: light;
 }
@@ -50,6 +52,8 @@
     --del-text: #f7b2ac;
     --hunk: #23314a;
     --shadow: none;
+    --vc-green: #8fcfa9; --vc-teal: #87cdd0; --vc-purple: #bca6e6; --vc-pink: #e6a6c6;
+    --vc-orange: #ebbb8f; --vc-yellow: #e3d08e; --vc-red: #eba29c; --vc-grey: #aab2bf;
     color-scheme: dark;
   }
 }
@@ -59,6 +63,8 @@
   --warn: #e5b450; --warn-soft: #3a2f15; --err: #f08077; --err-soft: #3c1f1d; --info-soft: #232833;
   --code-bg: #242933; --add: #183a25; --add-text: #9fe3b5; --del: #43201e; --del-text: #f7b2ac; --hunk: #23314a;
   --shadow: none; color-scheme: dark;
+  --vc-green: #8fcfa9; --vc-teal: #87cdd0; --vc-purple: #bca6e6; --vc-pink: #e6a6c6;
+  --vc-orange: #ebbb8f; --vc-yellow: #e3d08e; --vc-red: #eba29c; --vc-grey: #aab2bf;
 }
 
 * { box-sizing: border-box; }
@@ -91,7 +97,6 @@ header.top {
 header.top .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
 header.top .brand .logo { display: block; transition: transform 0.15s; }
 header.top .brand .brand-name { display: block; color: var(--text); }
-header.top .brand .brand-version { color: var(--muted); font-size: 12px; align-self: flex-end; padding-bottom: 2px; }
 header.top .brand:hover { text-decoration: none; }
 header.top .brand:hover .brand-name { color: var(--accent); }
 header.top .brand:hover .logo { transform: scale(1.06); }
@@ -397,3 +402,27 @@ button.chip:hover { background: var(--accent-soft); border-color: var(--accent);
   header.top .brand .logo { transition: none; }
   header.top .brand:hover .logo { transform: none; }
 }
+
+/* a zone tab's previous content while the next tab loads */
+.zone-body.stale { opacity: 0.5; transition: opacity 0.15s 0.1s; pointer-events: none; }
+
+/* the "← Zones" link above a page's heading */
+.back-link { font-size: 13px; margin-bottom: 2px; }
+
+/* view colours (the default is the link colour) */
+.vc-green { color: var(--vc-green); } .vc-teal { color: var(--vc-teal); } .vc-purple { color: var(--vc-purple); }
+.vc-pink { color: var(--vc-pink); } .vc-orange { color: var(--vc-orange); } .vc-yellow { color: var(--vc-yellow); }
+.vc-red { color: var(--vc-red); } .vc-grey { color: var(--vc-grey); } .vc-default { color: var(--accent); }
+.swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
+.swatch { width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; background: currentColor; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
+.swatch:hover { background: currentColor; }
+.swatch.selected { box-shadow: 0 0 0 2px currentColor; }
+.swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+tr.selected td { background: var(--accent-soft); }
+
+/* the page footer with the Jarl build */
+.shell { min-height: 100vh; display: flex; flex-direction: column; }
+.shell > main { flex: 1; width: 100%; }
+footer.site { padding: 12px 16px 16px; text-align: center; font-size: 12px; color: var(--muted); }
+footer.site a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
+footer.site a:hover { color: var(--accent); text-decoration-color: currentColor; }