/* Environment identity only: no pulse, live status, or health semantics. */
.environment-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    max-width: 100%;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.5;
    color: #9ba9b8;
    text-transform: uppercase;
}
.environment-indicator .environment-label { color: inherit; font-size: inherit; overflow-wrap: anywhere; }
.environment-indicator .environment-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #71b58c;
}
.environment-staging .environment-dot { background: #caa25e; }
.environment-invalid, .environment-unconfigured { color: #d5aa86; }
.environment-invalid .environment-dot, .environment-unconfigured .environment-dot { background: #c9896e; }
.environment-slot { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.environment-slot:empty { display: none; }
.header .header-inner { flex-wrap: wrap; gap: 12px; }
.header .header-user { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; gap: 10px; margin-left: auto; }
.header .header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
#stage > header { flex-wrap: wrap; gap: 12px; }
#stage > header .meta .environment-indicator { margin-bottom: 4px; }
@media (max-width: 600px) {
    .header .header-inner > div { min-width: 0; max-width: 100%; }
    .header .header-user { flex-basis: 100%; }
    .header .header-user > .environment-indicator { margin-left: auto; }
}