/* 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: var(--space-2);
}

.vault-type {
 padding: var(--space-2) var(--space-2);
 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;
 /* clear the eye toggle (not spacing rhythm) */
 padding-right: calc(
  var(--space-6) + var(--space-2)
 );
}

.vault-eye {
 position: absolute;
 right: var(--space-2);
 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: var(--space-3);
 flex-wrap: wrap;
}

.vault-reassure {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 font-size: 11px;
}

/* Vault: submitted items */
.vault-item {
 display: flex;
 align-items: center;
 gap: var(--space-3);
}

.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: var(--space-4);
}

.vault-item-actions {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 flex-shrink: 0;
}

.vault-item-preview {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2) var(--space-3);
 margin-top: var(--space-1);
 min-width: 0;
 max-width: 100%;
 overflow-x: auto;
}

.vault-field-preview {
 font-size: 12px;
 color: var(--muted-foreground);
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

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

.vault-edit-body {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

.vault-field-hint {
 font-size: 12px;
 margin: 0 0 var(--space-1);
}

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

.vault-blocked {
 display: flex;
 justify-content: center;
 padding: var(--space-8) var(--space-4)
  var(--space-10);
}

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

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

.vault-blocked-message {
 font-size: 14px;
 line-height: var(--leading-normal);
 margin: 0;
}

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