Make service version metadata less prominent

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>

app/sovran_systemsos_web/static/css/tiles.css

@@ -256,80 +256,44 @@
   color: var(--text-primary);
 }
 
-/* Version lives in the detail modal so compact tiles stay visually stable. */
+/* Version is secondary metadata: keep it available without making it a focal point. */
-.svc-detail-version-card {
+.svc-detail-version-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 7px;
-  margin: -6px 0 20px;
+  margin: -2px 0 16px;
-  padding: 12px 14px;
+  padding: 4px 0;
-  border: 1px solid rgba(109, 191, 139, 0.28);
+  color: var(--text-dim);
-  border-radius: 10px;
+  font-size: 0.74rem;
-  background: linear-gradient(135deg, rgba(109, 191, 139, 0.12), rgba(109, 191, 139, 0.04));
+  opacity: 0.78;
 }
 
 .svc-detail-version-icon {
-  display: grid;
+  color: var(--text-dim);
-  place-items: center;
+  font-size: 1rem;
-  width: 30px;
+  line-height: 1;
-  height: 30px;
+  opacity: 0.7;
-  border-radius: 8px;
-  background: rgba(109, 191, 139, 0.18);
-  color: var(--accent-color);
-  font-size: 1.35rem;
-  font-weight: 700;
 }
 
 .svc-detail-version-label {
-  color: var(--text-dim);
+  font-weight: 600;
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.svc-detail-version-copy {
-  min-width: 0;
-}
-
-.svc-detail-version-state {
-  display: inline-block;
-  margin-left: 6px;
-  padding: 2px 6px;
-  border-radius: 999px;
-  color: var(--accent-color);
-  background: rgba(109, 191, 139, 0.14);
-  font-size: 0.62rem;
-  letter-spacing: 0.04em;
-}
-
-.svc-detail-version-card--unavailable,
-.svc-detail-version-card--not-applicable {
-  border-color: rgba(229, 165, 10, 0.3);
-  background: rgba(229, 165, 10, 0.07);
-}
-
-.svc-detail-version-card--unavailable .svc-detail-version-icon,
-.svc-detail-version-card--not-applicable .svc-detail-version-icon {
-  color: var(--yellow);
-  background: rgba(229, 165, 10, 0.14);
-}
-
-.svc-detail-version-card--unavailable .svc-detail-version-state,
-.svc-detail-version-card--not-applicable .svc-detail-version-state {
-  color: var(--yellow);
-  background: rgba(229, 165, 10, 0.14);
 }
 
 .svc-detail-version-value {
-  margin-top: 2px;
+  min-width: 0;
-  color: var(--text-primary);
+  color: var(--text-secondary);
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.95rem;
+  font-size: 0.74rem;
-  font-weight: 700;
   word-break: break-word;
 }
 
+.svc-detail-version-row--unavailable .svc-detail-version-value,
+.svc-detail-version-row--not-applicable .svc-detail-version-value {
+  color: var(--text-dim);
+  font-family: inherit;
+  font-style: italic;
+}
+
 /* ── Service detail: Domain ──────────────────────────────────────── */
 
 .svc-detail-domain-value {

app/sovran_systemsos_web/static/js/service-detail.js

@@ -675,11 +675,14 @@ async function openServiceDetailModal(unit, name, icon) {
       ? 'This service does not expose a single package version'
       : (effectiveEnabled ? 'Version could not be detected' : 'Start the service to detect its version'));
     var versionBadge = serviceVersion ? 'Detected' : (versionNotApplicable ? 'Not applicable' : 'Not detected');
-    addSetup('<div class="svc-detail-version-card svc-detail-version-card--' + versionState + '">' +
+    // Version is useful supporting information, but not the primary reason for
-      '<div class="svc-detail-version-icon">⌁</div>' +
+    // opening this modal. Keep it as a quiet metadata row instead of a large
-      '<div class="svc-detail-version-copy"><div class="svc-detail-version-label">Installed version ' +
+    // callout so it does not compete with status and service actions.
-        '<span class="svc-detail-version-state">' + versionBadge + '</span></div>' +
+    addSetup('<div class="svc-detail-version-row svc-detail-version-row--' + versionState + '"' +
-      '<div class="svc-detail-version-value">' + escHtml(versionText) + '</div></div>' +
+      ' title="' + escHtml(versionText) + '">' +
+      '<span class="svc-detail-version-icon" aria-hidden="true">⌁</span>' +
+      '<span class="svc-detail-version-label">Version</span>' +
+      '<span class="svc-detail-version-value">' + escHtml(serviceVersion || versionBadge) + '</span>' +
       '</div>');
 
     // Section B2: BIP-110 live status (bip110 tile only)