/* 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;
}

.vault-banner-wrap {
 margin-bottom: 16px;
}

.vault-item-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.vault-item-preview {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 margin-top: 4px;
}

.vault-field-preview {
 font-size: 12px;
 color: var(--muted-foreground);
}

.vault-badge-warn {
 display: inline-block;
 margin-top: 4px;
 padding: 2px 8px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 500;
 background: color-mix(
  in srgb,
  var(--warning, #f59e0b) 18%,
  transparent
 );
}

.vault-edit-body {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.vault-field-hint {
 font-size: 12px;
 margin: 0 0 4px;
}

.vault-main.hidden,
.vault-blocked.hidden {
 display: none;
}

.vault-blocked {
 display: flex;
 justify-content: center;
 padding: 48px 16px 64px;
}

.vault-blocked-card {
 width: min(100%, 520px);
 padding: 28px 24px;
 text-align: center;
}

.vault-blocked-title {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 font-size: 20px;
 font-weight: 600;
 margin-bottom: 12px;
 color: var(--destructive, #ef4444);
}

.vault-blocked-message {
 font-size: 14px;
 line-height: 1.5;
 margin: 0;
}

@media (max-width: 720px) {
 .vault-types {
  grid-template-columns: repeat(2, 1fr);
 }
}