/**
 * MARSAPIENS // AGENT IDENTITY
 * Styles for: department badge, credit display, auth-select, sidebar agent block.
 * Linked from: archive/index.html
 */

/* ── Sidebar: department badge ─────────────────────────────────────────────── */

.status-dept-badge {
    display:          inline-block;
    font-family:      var(--font-mono, 'Share Tech Mono', monospace);
    font-size:        0.68rem;
    letter-spacing:   0.08em;
    padding:          0.15em 0.45em;
    border-radius:    2px;
    border:           1px solid currentColor;
    text-transform:   uppercase;
    opacity:          0.85;
    margin-top:       0;
    align-self:       center;
}

/* Per-department accent colours — matches dept-data.js palette */
.status-dept-badge--farming        { color: #6dbf7a; border-color: #6dbf7a33; background: #6dbf7a12; }
.status-dept-badge--engine-labs    { color: #f5a623; border-color: #f5a62333; background: #f5a62312; }
.status-dept-badge--security       { color: #e05555; border-color: #e0555533; background: #e0555512; }
.status-dept-badge--genetics       { color: #c47fff; border-color: #c47fff33; background: #c47fff12; }
.status-dept-badge--administration { color: #7ab8f5; border-color: #7ab8f533; background: #7ab8f512; }

/* ── Sidebar: credit counter ───────────────────────────────────────────────── */

.status-credits {
    display:        flex;
    align-items:    center;
    gap:            0.25em;
    font-family:    var(--font-mono, 'Share Tech Mono', monospace);
    font-size:      0.68rem;
    letter-spacing: 0.06em;
    color:          var(--color-amber, #f5c842);
    margin-top:     0;
    opacity:        0.9;
}

/* ── Auth form: department select ──────────────────────────────────────────── */

.auth-select {
    appearance:       none;
    -webkit-appearance: none;
    cursor:           pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.75rem center;
    padding-right:    2rem;
}

.auth-select option {
    background: #0d0d14;
    color:      #ccc;
}

.auth-select option:disabled {
    color: #555;
}

/* ── Agent identity — status bar inline row ────────────────────────────────── */

.status-agent {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            8px;
    margin-bottom:  0;
}

/* ── Nav: vault page link ──────────────────────────────────────────────────── */

a.vault-nav {
    color:          var(--color-amber, #f5c842);
    border:         1px solid #f5c84233;
    border-radius:  2px;
    padding:        0.2em 0.6em;
    font-size:      0.68rem;
    letter-spacing: 0.1em;
    transition:     border-color 0.15s, color 0.15s;
}
a.vault-nav:hover, a.vault-nav[aria-current="page"] {
    border-color: #f5c84277;
    color:        #fff;
}

/* Nav vault button styles moved to base.css (used site-wide) */


/* ── Vault auth modal ──────────────────────────────────────────────────────── */

.va-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.78);
    z-index:         9000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         12px;
    backdrop-filter: blur(4px);
    overflow:        hidden;
}

.va-modal {
    background:    #0d0d16;
    border:        1px solid #2a2a3a;
    border-radius: 4px;
    width:         100%;
    max-width:     420px;
    max-height:    90vh;
    overflow-y:    auto;
    padding:       2rem;
    box-shadow:    0 0 40px rgba(0, 0, 0, 0.7);
    font-family:   var(--font-mono, 'Share Tech Mono', monospace);
    box-sizing:    border-box;
}

.va-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
}

.va-title {
    font-size:      1rem;
    letter-spacing: 0.12em;
    color:          var(--color-amber, #f5c842);
}

.va-close {
    background:  transparent;
    border:      none;
    color:       #666;
    cursor:      pointer;
    font-size:   1.1rem;
    line-height: 1;
    padding:     0;
}
.va-close:hover { color: #ccc; }

.va-tabs {
    display:       flex;
    gap:           0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #222;
}

.va-tab {
    background:     transparent;
    border:         none;
    border-bottom:  2px solid transparent;
    color:          #555;
    cursor:         pointer;
    font-family:    inherit;
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    margin-bottom:  -1px;
    padding:        0.4em 1em;
    text-transform: uppercase;
    transition:     color 0.15s, border-color 0.15s;
}
.va-tab--active {
    color:        var(--color-amber, #f5c842);
    border-color: var(--color-amber, #f5c842);
}
.va-tab:hover:not(.va-tab--active) { color: #aaa; }

.va-error {
    background:    #2a0d0d;
    border:        1px solid #e0555555;
    border-radius: 2px;
    color:         #e05555;
    font-size:     0.68rem;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding:       0.5em 0.75em;
}

.va-field-group {
    margin-bottom: 1rem;
    min-width:     0;      /* prevents flex/grid children from overflowing */
    max-width:     100%;
}

.va-label {
    display:        block;
    color:          #555;
    font-size:      0.62rem;
    letter-spacing: 0.1em;
    margin-bottom:  0.35rem;
    text-transform: uppercase;
}

.va-input {
    width:          100%;
    max-width:      100%;
    min-width:      0;
    background:     #111118;
    border:         1px solid #2a2a3a;
    border-radius:  2px;
    color:          #ccc;
    font-family:    inherit;
    font-size:      0.8rem;
    letter-spacing: 0.04em;
    padding:        0.55em 0.75em;
    box-sizing:     border-box;
    transition:     border-color 0.15s;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.va-input:focus {
    border-color: #f5c84266;
    outline:      none;
}

.va-submit {
    width:          100%;
    margin-top:     0.5rem;
    font-family:    inherit;
    font-size:      0.75rem;
    letter-spacing: 0.1em;
}

.va-info {
    color:          #444;
    font-size:      0.62rem;
    letter-spacing: 0.04em;
    line-height:    1.5;
    margin-top:     1rem;
    text-align:     center;
}

/* ── Avatar Lab: credits HUD ──────────────────────────────────────────────── */

.lab-credits-hud {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            0.75rem;
    margin-top:     0.75rem;
    padding:        0.5rem 0.75rem;
    border:         1px solid #222;
    border-radius:  2px;
    background:     rgba(0, 0, 0, 0.25);
}

.lab-credits-balance {
    display:        flex;
    align-items:    center;
    gap:            0.4em;
    font-family:    var(--font-mono, 'Share Tech Mono', monospace);
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    color:          var(--color-amber, #f5c842);
}

.lab-credits-balance .cr-icon {
    font-size: 0.55rem;
    opacity:   0.75;
}

.lab-credits-free {
    color:          #aaa;
    font-family:    var(--font-mono, 'Share Tech Mono', monospace);
    font-size:      0.68rem;
    letter-spacing: 0.06em;
}

.lab-credits-buy {
    background:     transparent;
    border:         1px solid #f5c84244;
    border-radius:  2px;
    color:          var(--color-amber, #f5c842);
    cursor:         pointer;
    font-family:    inherit;
    font-size:      0.62rem;
    letter-spacing: 0.1em;
    padding:        0.25em 0.6em;
    text-transform: uppercase;
    transition:     border-color 0.15s, color 0.15s;
    white-space:    nowrap;
}
.lab-credits-buy:hover {
    border-color: #f5c84299;
    color:        #fff;
}

/* ── Avatar Lab: auth link (JOIN VAULT / VAULT) ───────────────────────────── */

.lab-credits-actions {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

.lab-auth-link {
    font-family:    var(--font-mono, 'Share Tech Mono', monospace);
    font-size:      0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #aaa;
    text-decoration: none;
    border:         1px solid #2a2a3a;
    border-radius:  2px;
    padding:        0.25em 0.6em;
    transition:     color 0.15s, border-color 0.15s;
    white-space:    nowrap;
}
.lab-auth-link:hover         { color: #fff; border-color: #555; }
.lab-auth-link--hidden       { display: none; }

/* ── Buy credits placeholder modal ────────────────────────────────────────── */

.buy-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.82);
    z-index:         9100;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         12px;
    backdrop-filter: blur(4px);
    overflow:        hidden;
}

.buy-modal {
    background:    #0d0d16;
    border:        1px solid #2a2a3a;
    border-radius: 4px;
    width:         100%;
    max-width:     380px;
    padding:       2rem;
    text-align:    center;
    font-family:   var(--font-mono, 'Share Tech Mono', monospace);
    box-sizing:    border-box;
}

.buy-modal-title {
    font-size:      1rem;
    letter-spacing: 0.12em;
    color:          var(--color-amber, #f5c842);
    margin-bottom:  0.75rem;
}

.buy-modal-body {
    color:       #666;
    font-size:   0.72rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    letter-spacing: 0.04em;
}

.buy-modal-close {
    background:     transparent;
    border:         1px solid #2a2a3a;
    border-radius:  2px;
    color:          #666;
    cursor:         pointer;
    font-family:    inherit;
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    padding:        0.4em 1.2em;
}
.buy-modal-close:hover { color: #aaa; border-color: #444; }

@media (max-width: 480px) {
    .buy-modal {
        padding:        1.25rem 1rem;
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            0.5rem;
    }

    .buy-modal-title {
        font-size: 0.88rem;
    }

    .buy-modal-body {
        font-size:     0.68rem;
        margin-bottom: 0.5rem;
    }

    /* Stack REGISTER FREE + CLOSE vertically */
    .buy-modal .cta-button.mini {
        width:     100%;
        margin-top: 0;
    }

    .buy-modal-close {
        width:     100%;
        padding:   0.5em 1em;
    }

    .lab-credits-hud {
        flex-direction: column;
        align-items:    stretch;
        gap:            0.5rem;
    }

    .lab-credits-actions {
        width:           100%;
        justify-content: stretch;
        gap:             0.4rem;
    }

    .lab-credits-buy,
    .lab-auth-link {
        flex:       1;
        text-align: center;
        padding:    0.4em 0.5em;
    }

    /* Vault auth modal — tighter on phones */
    .va-modal {
        padding: 1.25rem 1rem;
    }

    .va-title {
        font-size: 0.88rem;
    }

    .va-tabs {
        margin-bottom: 1rem;
    }

    .va-tab {
        font-size: 0.62rem;
        padding:   0.35em 0.7em;
    }
}