/* ============================================================================
   Military status: avatar badge + status-row styling.
   Theme: navy #0a1628 / #0f1a2e / #16223c, gold #c8a03c, white.
   No emoji, no icon fonts — the badge is an inline SVG drawn in app.js.
   ============================================================================ */

/* The badge is positioned over the bottom-right of an avatar. Any avatar wrapper
   that should carry it gets position:relative inline (or already has it). */
.mil-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a1628;
    color: #c8a03c;
    border: 1.5px solid #c8a03c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}

.mil-badge svg {
    width: 11px;
    height: 11px;
    display: block;
}

/* Slightly larger badge for the big profile-header avatar. */
.profile-avatar-container .mil-badge {
    width: 24px;
    height: 24px;
    right: 0;
    bottom: 0;
}

.profile-avatar-container .mil-badge svg {
    width: 14px;
    height: 14px;
}

/* Post-author avatar wrapper needs to be the positioning context. */
.pc-left {
    position: relative;
}

/* Inline status chip used on the profile page status row. */
.mil-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #c8a03c;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mil-status-chip svg {
    width: 13px;
    height: 13px;
}