From 367adcedc69de41adbc18c04d431bcddec048272 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 24 May 2026 18:51:22 -0400
Subject: [PATCH] feat(extension): add shared
 section-header/glyph-btn/kv-row/fingerprint CSS

Add four utility classes to both vault.css and popup styles.css for use in
settings/devices/trash/history management surfaces. These provide standardized
styling for section headers, glyph buttons, key-value rows, and fingerprints
that will be used across all revamped panes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 extension/src/popup/styles.css | 44 ++++++++++++++++++++++++++--------
 extension/src/vault/vault.css  | 44 ++++++++++++++++++++++++++--------
 2 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index 21226d1..5afc198 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -631,16 +631,6 @@ textarea {
 .sig-block--red   { border-left-color: #ab2b20; }
 
 /* --- custom-section rendering (β₂ slice 1) --- */
-.section-header {
-  margin-top: 14px;
-  margin-bottom: 4px;
-  padding-top: 10px;
-  border-top: 1px solid #21262d;
-  color: #8b949e;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
 .section-separator {
   margin: 10px 0 4px;
   border: 0;
@@ -1700,6 +1690,40 @@ textarea {
 .relicario-toast--info    { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; }
 .type-card__desc  { font-size: 10px; color: var(--text-muted, #8b949e); margin-top: 2px; }
 
+/* --- Shared utility classes for management surfaces (settings/devices/trash/history) --- */
+
+.section-header {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 4px;
+  margin: 16px 0 10px 0;
+  font-size: 11px;
+}
+
+.section-header:first-child { margin-top: 0; }
+
+.glyph-btn[data-danger]:hover { color: var(--danger); border-color: var(--danger); }
+
+.kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 4px 0;
+}
+.kv-row > .k { color: var(--text-muted); }
+.kv-row > .v { color: var(--text); font-variant-numeric: tabular-nums; }
+
+.fingerprint {
+  font-family: ui-monospace, monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  word-break: break-all;  /* wraps to two lines in popup (~360px) */
+  line-height: 1.4;
+}
+
 /* === Settings layout === */
 .settings-layout {
   display: flex;
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index 19fa844..45994b6 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -550,16 +550,6 @@ textarea {
 .sig-block--red   { border-left-color: #ab2b20; }
 
 /* --- custom-section rendering --- */
-.section-header {
-  margin-top: 14px;
-  margin-bottom: 4px;
-  padding-top: 10px;
-  border-top: 1px solid #21262d;
-  color: #8b949e;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
 .section-separator {
   margin: 10px 0 4px;
   border: 0;
@@ -2156,3 +2146,37 @@ textarea {
 .relicario-toast--success { background: #1f4a24; color: #aff0b5; border: 1px solid #238636; }
 .relicario-toast--error   { background: #4a1f1f; color: #f0afaf; border: 1px solid #ab2b20; }
 .relicario-toast--info    { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; }
+
+/* --- Shared utility classes for management surfaces (settings/devices/trash/history) --- */
+
+.section-header {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 4px;
+  margin: 16px 0 10px 0;
+  font-size: 11px;
+}
+
+.section-header:first-child { margin-top: 0; }
+
+.glyph-btn[data-danger]:hover { color: var(--danger); border-color: var(--danger); }
+
+.kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 4px 0;
+}
+.kv-row > .k { color: var(--text-muted); }
+.kv-row > .v { color: var(--text); font-variant-numeric: tabular-nums; }
+
+.fingerprint {
+  font-family: ui-monospace, monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  word-break: break-all;  /* wraps to two lines in popup (~360px) */
+  line-height: 1.4;
+}