/* m0 Design System — Panels: Vault v2 (CANONICAL)
 * Pro inventory dashboard — dense, modern, no gamification.
 * Controls in the bottom panel bar. Fields have no buttons.
 * All classes use the vault-v2- panel prefix (CSS canon).
 */

/* Shell — pinned PanelBar (panel-bar canon).
 * Root is a flex column; `.panel-scrollable` (shared) takes flex:1
 * and scrolls; PanelBar is the final sibling so it stays docked. */
.vault-v2-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vault-v2-panel > .panel-scrollable {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.vault-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Header */
.vault-v2-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0 0 var(--spacing-sm);
    border-bottom: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 18%, transparent);
}
.vault-v2-headline {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--patriot-white);
}

/* Dense labels: longer copy lives in native `title` tooltips */
.vault-v2-tip {
    cursor: help;
}

/* Arrangement groups (unlock vs yield) */
.vault-v2-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-group-label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    width: fit-content;
}
.vault-v2-section--yield-empty {
    opacity: 0.92;
}

/* Empty state */
.vault-v2-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
}
.vault-v2-empty-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--patriot-white);
    width: fit-content;
}

/* Entity picker — compact chips */
.vault-v2-entity-picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-picker-hint {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vault-v2-entity-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.vault-v2-entity-card {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    padding: 0.35rem var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 22%, transparent);
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}
.vault-v2-entity-card:hover {
    border-color: color-mix(in srgb, var(--anviz-accent-secondary) 45%, transparent);
    background: color-mix(in srgb, var(--anviz-accent-secondary) 6%, transparent);
}
.vault-v2-entity-card--active {
    border-color: color-mix(in srgb, var(--anviz-accent-primary) 50%, transparent);
    background: color-mix(in srgb, var(--anviz-accent-primary) 10%, transparent);
}
.vault-v2-entity-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--patriot-white);
}
.vault-v2-entity-kind {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Sections — dense cards */
.vault-v2-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.vault-v2-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 16%, transparent);
    background: color-mix(in srgb, var(--anviz-bg-panel) 100%, transparent);
}
.vault-v2-section--open {
    border-color: color-mix(in srgb, var(--anviz-accent-secondary) 32%, transparent);
}
.vault-v2-section-header {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.vault-v2-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
.vault-v2-section-title {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vault-v2-section-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 2.25rem;
    text-align: right;
}

/* Completeness — sits in the header, one 0/5 only */
.vault-v2-section-completeness {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}
.vault-v2-completeness-bar {
    height: 2px;
    flex: 1;
    background: color-mix(in srgb, var(--anviz-accent-secondary) 14%, transparent);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.vault-v2-completeness-fill {
    height: 100%;
    background: color-mix(in srgb, var(--anviz-accent-primary) 85%, var(--anviz-accent-secondary));
    border-radius: var(--radius-pill);
    transition: width 0.35s ease;
}

.vault-v2-section-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    border-top: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 12%, transparent);
}

/* Typed RecordSetView mount — panel scroll owns overflow; drop
   the modal's flex/max-height clamp so fields flow in-section. */
.vault-v2-section-body--record-set .record-set-view {
    flex: none;
    max-height: none;
    overflow: visible;
}
.vault-v2-section-body--record-set .record-set-scroll {
    flex: none;
    overflow: visible;
}

/* Field grid — modern dense form */
.vault-v2-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}
@media (min-width: 520px) {
    .vault-v2-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm) var(--spacing-md);
    }
    /* Full-width for email / phone / date when they need room —
       keep simple 2-col; date can span if needed later. */
}

.vault-v2-field-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.vault-v2-field-row--readonly {
    grid-column: 1 / -1;
    padding: var(--spacing-xs) 0;
}
.vault-v2-field-readonly-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.vault-v2-field-label {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.vault-v2-field-note {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vault-v2-field-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.vault-v2-saved-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    background: color-mix(in srgb, var(--status-success) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-success) 28%, transparent);
    border-radius: var(--radius-pill);
}
.vault-v2-value-text {
    color: var(--patriot-white);
    font-size: 0.8rem;
}
.vault-v2-field-empty {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Tighten shared form-field chrome inside this panel only */
.vault-v2 .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}
.vault-v2 .form-field-label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-secondary);
    line-height: 1.2;
}
/* Fieldset legends don't participate in flex `gap` the way
   `<label class="form-field-label">` does — restore the shared
   legend→control spacing that `.form-field-label { margin: 0 }`
   otherwise collapses (Government ID vs ID document). */
.vault-v2 .form-field--gov-id > legend.form-field-label,
.vault-v2 .form-field--name-composite > legend.form-field-label,
.vault-v2 .form-field--address-inline > legend.form-field-label {
    margin: 0 0 var(--spacing-xs);
}
.vault-v2 .form-field-required {
    margin-left: 0.15rem;
    color: var(--status-warning, var(--text-accent-gold));
}
.vault-v2 .form-field-input,
.vault-v2 .form-field-input--select {
    margin: 0;
    min-height: 2.25rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.88rem;
    line-height: 1.25;
    border-radius: var(--radius-sm);
}

/* Verification dots */
.vault-v2-verification-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
    opacity: 0.4;
}
.vault-v2-verification-dot--unverified { background: var(--text-muted); opacity: 0.4; }
.vault-v2-verification-dot--self-attested { background: var(--text-secondary); opacity: 1; }
.vault-v2-verification-dot--document-extracted { background: var(--text-accent); opacity: 1; }
.vault-v2-verification-dot--provider-verified { background: var(--status-success); opacity: 1; }

/* Capabilities — single compact row when collapsed */
.vault-v2-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.vault-v2-capability {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    font-size: 0.66rem;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.02em;
}
.vault-v2-capability--unlocked {
    background: color-mix(in srgb, var(--status-success) 10%, transparent);
    color: var(--status-success);
    border: 1px solid color-mix(in srgb, var(--status-success) 28%, transparent);
}
.vault-v2-capability--locked {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
    opacity: 0.75;
}

/* Storage section (v2) */
.vault-v2-storage-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 12%, transparent);
}
.vault-v2-storage-loading {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.vault-v2-storage-host {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-storage-host-primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.vault-v2-storage-host-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
}
.vault-v2-storage-host-kind {
    font-size: 0.74rem;
    color: var(--text-secondary);
}
.vault-v2-storage-usage {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-storage-usage-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.vault-v2-storage-usage-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.vault-v2-storage-usage-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.vault-v2-storage-usage-bar {
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    overflow: hidden;
}
.vault-v2-storage-usage-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--anviz-accent-secondary) 60%, transparent);
}
.vault-v2-storage-sponsorship {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--status-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-warning) 20%, transparent);
}
.vault-v2-storage-sponsorship-line {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.vault-v2-storage-sponsorship-cost {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* Graduation reveal */
.vault-v2-storage-graduated {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.vault-v2-storage-graduated-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-storage-graduated-fields dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.vault-v2-storage-graduated-fields dd {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    word-break: break-all;
}
.vault-v2-storage-graduated-fields dd code {
    font-family: inherit;
    font-size: inherit;
}

.vault-v2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    color: var(--text-muted);
}

.vault-v2-status {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.vault-v2-status--error {
    color: var(--status-error);
}

/* Grants / paired contacts — Nature density (select row → bar). */
.vault-v2-grant-stack,
.vault-v2-contact-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.vault-v2-subsection-title {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vault-v2-grant-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    min-width: 0;
}
.vault-v2-grant-row-title {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.vault-v2-grant-row-meta {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.vault-v2-grant-row--pending .vault-v2-grant-row-title {
    color: var(--status-warning);
}