/* Vault Health deck */
#view-vault .vault-proj { cursor: pointer; }
#view-vault .vp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#view-vault .vp-glyph { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; border: 1px solid; flex-shrink: 0; }
#view-vault .vp-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; }
#view-vault .vp-health { margin-left: auto; font-weight: 700; font-size: 16px; }
#view-vault .vp-note { font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; min-height: 38px; }

/* ── Knowledge graph ─────────────────────────────────────────── */
#view-vault .vault-graph-wrap { padding: 8px; }
#view-vault .vault-graph-svg { width: 100%; height: auto; display: block; overflow: visible; }
#view-vault .vg-edge { stroke: rgba(95,176,137,0.18); stroke-width: 1; transition: stroke .18s, stroke-width .18s; }
#view-vault .vg-edge.hot { stroke: var(--mint); stroke-width: 2; }
#view-vault .vg-node circle { transition: filter .2s, transform .18s; transform-origin: center; animation: vgPulse 4s ease-in-out infinite; animation-delay: var(--d); }
#view-vault .vg-node.big circle { filter: drop-shadow(0 0 10px rgba(95,176,137,0.55)); }
#view-vault .vg-node:hover circle, #view-vault .vg-node.hot circle { filter: drop-shadow(0 0 9px currentColor); }
#view-vault .vg-node.hot circle { transform: scale(1.18); }
#view-vault .vg-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
@keyframes vgPulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* ── Gauge ───────────────────────────────────────────────────── */
#view-vault .gauge { position: relative; width: 150px; height: 150px; margin: 6px auto 0; }
#view-vault .gauge-svg { width: 150px; height: 150px; }
#view-vault .gauge-svg circle:last-child { transition: stroke-dashoffset 1s var(--ease); }
#view-vault .gauge-num { position: absolute; inset: 0; display: grid; place-items: center; }
#view-vault .gauge-num span { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--mint); }
#view-vault .gauge-num small { display: block; text-align: center; color: var(--text-faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ── Operatives writing in ───────────────────────────────────── */
#view-vault .vault-op { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 9px; cursor: pointer; transition: background .12s; }
#view-vault .vault-op:hover { background: var(--card-hover); }
#view-vault .vault-op-glyph { font-size: 16px; color: var(--mint); width: 18px; text-align: center; }
#view-vault .vault-op-main { flex: 1; min-width: 0; }
#view-vault .vault-op-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
#view-vault .vault-op-role { font-size: 11.5px; }
#view-vault .vault-op-go { color: var(--text-faint); }
#view-vault .vault-op:hover .vault-op-go { color: var(--mint); }

/* ── Connectivity / system status board ──────────────────────── */
#view-vault .vault-svc-list { display: flex; flex-direction: column; }
#view-vault .vault-svc { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 9px; }
#view-vault .vault-svc + .vault-svc { border-top: 1px solid var(--border); border-radius: 0; }
#view-vault .vault-svc-dot { margin: 0 1px; }
#view-vault .vault-svc-glyph { font-size: 15px; color: var(--mint); width: 18px; text-align: center; flex-shrink: 0; }
#view-vault .vault-svc-main { flex: 1; min-width: 0; }
#view-vault .vault-svc-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
#view-vault .vault-svc-note { font-size: 11px; line-height: 1.45; margin-top: 2px; }
#view-vault .vault-svc-state { font-size: 11px; color: var(--text-faint); white-space: nowrap; text-align: right; flex-shrink: 0; }
#view-vault .vault-svc-stamp { font-size: 10.5px; letter-spacing: .04em; }

/* ── Recent vault writes feed ────────────────────────────────── */
/* Heading centered; titles/labels in body font, only the path stays mono. */
#view-vault .vault-feed-head { justify-content: center; text-align: center; position: relative; }
#view-vault .vault-feed-head .badge { position: absolute; right: 20px; }
#view-vault .vault-feed .feed-item { align-items: center; }
#view-vault .vault-feed-src { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text); }
#view-vault .vault-feed-path { font-size: 11px; color: var(--text-faint); margin-top: 3px; word-break: break-all; }

@media (max-width: 860px){
  #view-vault .grid[style*="300px"], #view-vault .grid[style*="1.4fr"] { grid-template-columns: 1fr !important; }
  #view-vault .vault-feed-head .badge { position: static; }
}