/* Vault feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout live in theme.css. */

/* Vault: key/value field rows */
.vault-kv {
 align-items: center;
}

.vault-kv .input {
 flex: 1;
}

/* Vault: type button group */
.vault-types {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 6px;
}

.vault-type {
 padding: 6px 8px;
 border: 0;
 border-radius: var(--radius-md);
 background: var(--muted);
 color: var(--muted-foreground);
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
}

.vault-type:hover {
 color: var(--foreground);
}

.vault-type.active {
 background: var(--primary);
 color: var(--primary-foreground);
}

/* Vault: secret field with show/hide toggle */
.vault-secret {
 position: relative;
 display: flex;
 align-items: center;
}

.vault-secret .input {
 flex: 1;
 padding-right: 38px;
}

.vault-eye {
 position: absolute;
 right: 8px;
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
}

.vault-eye:hover {
 color: var(--foreground);
}

/* Vault: submit row + reassurance */
.vault-submit-row {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
}

.vault-reassure {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
}

/* Vault: submitted items */
.vault-item {
 display: flex;
 align-items: center;
 gap: 12px;
}

.vault-item-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: var(--radius-sm);
 background: var(--accent);
 color: var(--primary);
 flex-shrink: 0;
}

.vault-item-main {
 flex: 1;
 min-width: 0;
}

.vault-item-label {
 font-size: 14px;
 font-weight: 500;
}

.vault-mask {
 font-family: monospace;
 font-size: 11px;
 color: var(--border);
 letter-spacing: 1px;
}