/* assets/vault/vault.css: the Vault button and the vault pane, in the designer's classes (design/README.md section 5:
   .tool, .pane, .pane-head, .pane-tabs, .pane-body, .steps, .kv, .btn, .field, .notice). As in assets/meter/meter.css,
   the rules for the designer's classes are fallbacks inside :where() (no specificity: the designer's stylesheet wins
   where it has the rule); the .nr-* rules are this feature's own. */

:where(.pane) { position: fixed; z-index: 40; inset: 0; background: var(--panel, #fffdf8); color: var(--ink, #121317); display: flex; flex-direction: column; font: 400 15px/1.5 var(--sans, system-ui, sans-serif); }
.pane[hidden] { display: none !important; }
:where(.pane-head) { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2, var(--rule, #9d9580)); background: var(--paper, #f6f3ec); }
:where(.pane-head h2) { margin: 0; padding: 0; border: 0; font: 600 16px/1.2 var(--sans, system-ui, sans-serif); text-transform: none; letter-spacing: 0; }
:where(.pane-head .spacer) { flex: 1; }
:where(.pane-head button) { background: none; border: 1px solid var(--rule-2, var(--rule, #9d9580)); border-radius: 999px; height: 32px; padding: 0 12px; font: 500 13px/1 var(--sans, system-ui, sans-serif); color: inherit; cursor: pointer; }
:where(.pane-tabs) { display: flex; border-bottom: 1px solid var(--rule-2, var(--rule, #9d9580)); padding: 0 8px; overflow-x: auto; }
:where(.pane-tabs button) { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; font: 500 14px/1 var(--sans, system-ui, sans-serif); color: var(--ink-2, #3f424a); cursor: pointer; }
:where(.pane-tabs [aria-selected="true"]) { color: var(--ink, #121317); border-bottom-color: var(--brand, var(--accent, #1b4597)); }
:where(.pane-body) { flex: 1; overflow-y: auto; padding: 16px; }
:where(.pane-body h3) { font: 600 18px/1.3 var(--serif, Georgia, serif); margin: 18px 0 6px; }
:where(.pane-body h3:first-child) { margin-top: 0; }
:where(.kv) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; font-size: 14px; }
:where(.kv dt) { color: var(--ink-3, #595c64); }
:where(.kv dd) { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; overflow-wrap: anywhere; }
@media (min-width: 768px) { :where(.pane) { left: auto; width: 420px; border-left: 1px solid var(--rule-2, var(--rule, #9d9580)); box-shadow: 0 1px 2px rgba(18, 19, 23, .06), 0 8px 24px rgba(18, 19, 23, .10); } }

/* this feature's own */
#nr-vault-pane [hidden] { display: none !important; }
.vault-btn .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3, #595c64); flex: none; }
.vault-btn.on .dot { background: var(--ok, #2b6a3c); border-color: var(--ok, #2b6a3c); }
.vault-btn .pend { font: 500 11px/1 var(--mono, ui-monospace, monospace); background: var(--ink, #121317); color: var(--paper, #f6f3ec); border-radius: 999px; padding: 2px 6px; }
.vault-btn .pend[hidden] { display: none; }
.nr-vault-pane .nr-beta { font: 600 10.5px/1 var(--sans, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3, #595c64); border: 1px solid var(--hair, #d9d2c1); border-radius: 999px; padding: 3px 7px; }
.nr-vault-pane .pane-body section > p.meta, .nr-vault-pane .steps .meta { font-size: 13.5px; }
.nr-vault-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--paper-2, var(--paper-sunk, #ece7db)); border-bottom: 1px solid var(--hair, #d9d2c1); font: 400 13px/1.4 var(--sans, system-ui, sans-serif); color: var(--ink-2, #3f424a); }
.nr-vault-strip[hidden] { display: none; }
.nr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.nr-sm { min-height: 32px !important; padding: 0 10px !important; font-size: 13px !important; }
.nr-ok { color: var(--ok, #2b6a3c); font-weight: 500; }
.nr-warn { color: var(--warn, #8a5200); }
.nr-missing { border-left-color: var(--warn, #8a5200) !important; }
.nr-missing p { margin: 0 0 8px; }
.nr-missing p:last-child { margin: 0; }
.nr-recovery .nr-mono { font-size: 15px; letter-spacing: .04em; }
.nr-mono { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; overflow-wrap: anywhere; }
.nr-secret { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.nr-list { list-style: none; padding: 0; margin: 10px 0; }
.nr-list li { padding: 8px 0; border-bottom: 1px solid var(--hair, #d9d2c1); font-size: 14px; }
.nr-vault-pane .table { overflow-x: auto; }
@media print { .pane, .vault-btn, #nr-tools { display: none !important; } }